javascript - 2 Forms on the page with JS validation - one throws email validation error -
i've added 2 forms on 1 page of wordpress website: 1 mobile display , 1 in sidebar desktop computers (bigger screens).
i've done , can't seem figure out why doesn't work time.
what happens desktop form throws validation error on email field, when entering valid email. only doesn't work email field on desktop form, validation works on other input fields (name, ..) - , on mobile form well.
i'm using simple java script validate forms, both forms use same function validating email address. form validation triggered submit button , form fields have different id's.
if i'm not displaying mobile form, desktop email validation works fine?!?
now code (just key elements question): html-form on page
<form class="formmob"> <label for="fullname">full name</label> <input type="text" id="fullname-mob" name="fullname" type="text"> <div class="form-error" id="error-fullname-mob"> <span>please enter full name</span> </div> <label for="email">e-mail address</label> <input type="email" id="email-mob" name="email" placeholder="email address"> <div class="form-error" id="error-email-mob"> <span>please enter valid email</span> </div> <button class="submitme" id="submitform-mob">submit details</button> </form> <!-- desktop form --> <form class="form"> <label for="fullname">full name</label> <input type="text" id="fullname" name="fullname" type="text"> <div class="form-error" id="error-fullname"> <span>please enter full name</span> </div> <label for="email">e-mail address</label> <input type="email" id="email" name="email" placeholder="email address"> <div class="form-error" id="error-email"> <span>please enter valid email</span> </div> <button class="submitme" id="submitform">submit details</button> </form>
the java script:
$jq(function(){ $jq('#submitform').click(function(event) { /*validate email*/ if(validateemail( $jq('#email').val() )){ $jq('#error-email').hide(); } else{ valido = false; $jq('#error-email').show('fast'); } }); $jq('#submitform-mob').click(function(event) { /*validate email*/ if(validateemail($jq('#email-mob').val())){ $jq('#error-email-mob').hide(); } else{ valido = false; $jq('#error-email-mob').show('fast'); } }); });
would appreciate comments or ideas. thanks!
one issue labels mob version pointing id's of inputs full version
<label for="email">e-mail address</label>
should
<label for="email-mob">e-mail address</label>
probably not cause of validation errors, cause issues screen readers
Comments
Post a Comment