如何在表单验证中显示不同的错误消息

Question

I have one form with different input types.Here I need to show error message depends on the user's input.

If fields are empty,I will show Enter required fields .
If email is invalid I need to show Enter valid email .

But My code displays only Enter valid email message even fields are empty.why its displaying like this?What wrong with my code?

 $(document).ready(function () { $('#errorMsg').hide(); }) function submitForm() { $('#myForm').find('input,select').each(function () { var element = $(this).val() == undefined ? '' : $(this).val().trim(); if (element == '') { $(this).addClass('borderDanger'); $('#errorMsg').html('Enter all required fields'); $('#errorMsg').show(); } else { $(this).removeClass('borderDanger'); $('#errorMsg').html(''); $('#errorMsg').hide(); } }) $('#myForm').find('input[type="email"]').each(function () { var emailRejex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$/; if (String($(this)).match(emailRejex)) { $(this).removeClass('borderDanger'); $('#errorMsg').html(''); $('#errorMsg').hide(); } else { $(this).addClass('borderDanger'); $('#errorMsg').html('Enter valid Email'); $('#errorMsg').show(); } }) } 

 #errorMsg { width: 60%; padding: 9px; z-index: 9; margin-top: 4%; color: #a94442; background-color: #f2dede; border: 1px solid #ebccd1; border-radius: 4px; right: 5%; font-weight: bold; } .borderDanger { border:1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="errorMsg"></div> <div id="myForm"> <input type="text"> <input type="email"> <button onclick="submitForm()">Submit</button> </div> 

Answer 1

$('#errorMsg').html('Enter valid Email');

This part replace what ever is in '#errorMsg' , better way to show errors is liket this: (generate error variable with your error/errors then show at once)

var errors = [];
if(error){
errors.push("error 1");
}
if(error){
errors.push("error 2");
}

then show them at once:

 $('#errorMsg').html(errors);
 $('#errorMsg').show();

like this

 // Code goes here $(document).ready(function () { $('#errorMsg').hide(); }) function submitForm() { var errors = '' $('#myForm').find('input,select').each(function () { var element = $(this).val() == undefined ? '' : $(this).val().trim(); if (element == '') { $(this).addClass('borderDanger'); errors += 'Enter all required fields </br>' $('#errorMsg').html(errors); $('#errorMsg').show(); } else { if($(this).attr('type') == 'email'){ var emailRejex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$/; if (String($(this)).match(emailRejex)) { $(this).removeClass('borderDanger'); $('#errorMsg').html(''); $('#errorMsg').hide(); } else { $(this).addClass('borderDanger'); errors += 'Enter valid Email' $('#errorMsg').html(errors); $('#errorMsg').show(); } } $(this).removeClass('borderDanger'); } }) $('#myForm').find('input[type="email"]').each(function () { }) } 

 #errorMsg { width: 60%; padding: 9px; z-index: 9; margin-top: 4%; color: #a94442; background-color: #f2dede; border: 1px solid #ebccd1; border-radius: 4px; right: 5%; font-weight: bold; } .borderDanger { border:1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="errorMsg"></div> <div id="myForm"> <input type="text" /> <input type="email" /> <button onclick="submitForm()">Submit</button> </div> 

plankr

Answer 2

Try this if you don't want invalid email message when textbox is empty

    $('#myForm').find('input[type="email"]').each(function () {
//Check if email is empty
     var element = $(this).val() == undefined ? '' :$(this).val().trim();
           if (element == '') return;
                        var emailRejex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
                        if (String($(this)).match(emailRejex)) { 
                         $(this).removeClass('borderDanger');
                         $('#errorMsg').html('');
                         $('#errorMsg').hide();
                        }
                        else{
                         $(this).addClass('borderDanger');
                 $('#errorMsg').html('Enter valid Email');
                 $('#errorMsg').show();
                        }
              })