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

这部分取代了＃error;＃errorMsg＆＃39; ，更好的显示错误的方法就是这样:(生成错误变量，错误/错误，然后立即显示）

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

然后立即显示它们：

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

像这样

＆＃13;

// 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 () {
       
    })
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

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

2 个答案: