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

Question

我有一个具有不同输入类型的表单。这里我需要根据用户的输入显示错误消息。

如果字段为空，我将显示输入必填字段。
如果电子邮件无效，我需要显示输入有效电子邮件。

但是即使字段为空，我的代码也仅显示 输入有效电子邮件 消息。为什么会这样显示？我的代码有什么问题吗？

$(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