jQuery删除类从以前的数据输入到表单

jQuery remove class from previous data entry into form

本文关键字：数据 输入 表单 删除 jQuery      更新时间：2023-09-26

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

我有一个简单的表单验证脚本。当用户输入数据时，如果数据为空，则显示相应的错误。

当用户输入所需字段并再次提交表单时，我希望错误消息消失，如果它不再为空，如果其他字段仍然为空，则显示相应的错误。

我尝试了以下操作，在输入所需的表单字段并完成重新提交后，仍然显示错误。

jsfiddle 

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

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

// jQuery form validation
$(document).ready(function(){
    // remove class from previous data entry
    $('#myform span').removeClass('error_show');
    // field mapping
    var form_fields = {
        'email' : 'email',
        'pword' : 'password',
        'fname' : 'first name',
        'lname' : 'last name'
    };
    // ajax data
    var data = {};
    // make sure form fields were entered
    $('#myForm').on('submit', function(e){
        for (var field in form_fields) {
            if (!$('#' + field).val()) {
                $('#' + field).next().addClass('error_show');
            } else if ($('#' + field).val()) {
                data[field] = $('#' + field).val();
            }
        }
        return false;
    });
});

只需将removeClass()添加到验证函数的else分支:

// jquery form validation
$(document).ready(function(){
    // remove class from previous data entry
    $('#myform span').removeClass('error_show');
    // field mapping
    var form_fields = {
        'email' : 'email',
        'pword' : 'password',
        'fname' : 'first name',
        'lname' : 'last name'
    };
    // ajax data
    var data = {};
    // make sure form fields were entered
    $('#myForm').on('submit', function(e){
        for (var field in form_fields) {
            if (!$('#' + field).val()) {
                $('#' + field).next().addClass('error_show');
            } else if ($('#' + field).val()) {
                $('#' + field).next().removeClass('error_show'); // <-- Here .removeClass() is added
                data[field] = $('#' + field).val();
            }
        }
        return false;
    });
});

现在，当字段有值时，类将被删除。

演示:https://jsfiddle.net/mxjvu95n/1/

相关文章：