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

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -