jQuery表单验证失败时不显示错误

jQuery Form Validation not showing error upon failure

本文关键字：显示 错误 失败 表单 验证 jQuery      更新时间：2023-09-26

注意:这是一个jQuery编码练习，所以我不允许使用插件或其他模块。

我做了一个简单的，典型的表单，想要检查，以确保表单字段被输入，而不是留空。如果是，则会出现显示错误的相应消息。到目前为止，我还没有成功。

在此之后，我将添加一个功能来确保输入有效的电子邮件。

My form: 

<form id="myForm">
          <input type="text" placeholder="Email" id="email" name="email">
          <span class="error">Email not entered</span><br />
          <input type="password" placeholder="Password" id="pword" name="pword">
          <span class="error">Password not entered</span><br />
          <input type="text" placeholder="First Name" id="fname" name="fname">
          <span class="error">First Name not entered</span><br />
          <input type="text" placeholder="Last Name" id="lname" name="lname">
          <span class="error">Last Name not entered</span><br />
          <input type="submit" value="Submit">
    </form>
jQuery: 

$(document).ready(function(){
    // field mapping
    var form_fields = {
        'email' : 'email',
        'pword' : 'password',
        'fname' : 'first name',
        'lname' : 'last name'
    };
    // make sure form fields were entered
    $('#myForm').on('submit', function(e){
        e.preventDefault();
        for (var field in form_fields) {
            if (!$('#' + field).val()) {
                $('#' + field + ' span').addClass('.error_show');
            }
        }
    });
});
CSS: 

.error {
    display: none;
}
.error_show {
    display: inline-block;
    color: red;
    margin-bottom: 1em;
}

一切都很好，除了您选择element的后续span的方式以及您添加error class的方式。您可以使用。next找到input验证的下一个element，然后我想提到下面要做的更改，这里是DEMO

for (var field in form_fields) {
   if (!$('#' + field).val()) {
        $('#' + field).next('.error').addClass('error_show'); //get the next element with class .error
   }
}

你添加类的方式是.addClass('.error_show');和这里.不应该在添加类时给出，因为它不是选择器并且是一个类名。

如果span是'#'+field的child，你的selector将工作，因为它是sibling，它无法找到特定的span与你使用它的方式。或者，您可以使用#' + field +' ~ span'或#' + field +' + span'。演示。点击这里了解更多关于选择器的信息

相关文章：