如何在表單驗證中顯示不同的錯誤消息

Question

我有一個具有不同輸入類型的表單。在這里，我需要根據用戶輸入顯示錯誤消息。

如果字段為空，我將顯示Enter required fields 。
如果電子郵件無效，則需要顯示Enter valid email 。

但是我的代碼只顯示Enter valid email消息，即使字段為空。為什么這樣顯示？我的代碼有什么問題？

 $(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');

這部分替換了'#errorMsg'中的內容，顯示錯誤的更好方法是這樣的：（使用您的錯誤生成錯誤變量，然后立即顯示）

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

然后立即顯示它們：

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

像這樣

 // 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

如果不想在文本框為空時發送無效的電子郵件，請嘗試此操作

    $('#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();
                        }
              })