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

Question

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

我有一个简单的表单验证脚本。当用户输入数据并且它是空的时，显示适当的错误。

当用户输入必填字段并再次提交表单时，如果错误消息不再为空，并且如果其他字段仍然为空，则显示相应的错误消息。

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

jsfiddle

HTML

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

​​

Answer 1

只需添加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/