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

【问题标题】：How to show different error messages in form validation如何在表单验证中显示不同的错误消息
【发布时间】：2018-01-16 09:42:44
【问题描述】：

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

如果字段为空，我将显示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>

【问题讨论】：

使用 Jquery 验证插件
您的正则表达式验证正在第二次运行。正则表达式验证在空字符串上失败，这就是您看到无效电子邮件的原因。需要先检查邮箱是否为空

标签： javascript jquery

【解决方案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

【讨论】：

【解决方案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();
                        }
              })

【讨论】：