使用 jQuery 检查验证答案

【问题标题】：checking validation using jQuery使用 jQuery 检查验证
【发布时间】：2017-03-24 09:29:09
【问题描述】：

任何人都可以给我一个建议，我在检查时对我的 jQuery 登录验证有问题。

例如：

第一个问题： 我提交了我的表单，它有一个错误将出现在我的文本框下方并会显示，如果我再次提交，它将在第一条错误消息下方添加另外一条错误消息。

问题 1 如何摆脱那些重复的 = p class="text-danger"？

here is my username textbox 
The username field is required. //error if empty
The username field is required. //2nd attempt of submit if textbox is empty

here is my password textbox
The password field is required. //error if empty
The username field is required. //2nd attempt of submit if textbox is empty

第二个问题： 我提交的表格都是空的，它将显示以下消息。然后，当我将值放在“用户名文本”上时，它将删除我用户名上的错误消息，这是正确的。但是，如果两者都是空的，并且当我只在密码文本框上输入值时，它将删除错误消息，因为它必须只删除密码错误。

问题二如何解决用户名有值且不为空时的错误提示？

here is my username textbox 
The username field is required. //error if empty (if I put value on the username field it will removed this error message)

here is my password textbox
The password field is required. //error if empty (if i put value on the password field it will removed both error message)

登录表格：

<div class="form-group form-margin">
    <label class="col-lg-4 control-label">Username:</label>
    <div class="col-lg-7">
         <?=form_input(['name'=>'username', 'class'=>'form-control error', 'autofocus'=>'autofocus', 'id'=>'username', 'placeholder'=>'Username']);?>   
    </div>
</div>
<div class="form-group">
    <label class="col-lg-4 control-label">Password:</label>
    <div class="col-lg-7">
        <?=form_password(['name'=>'password', 'class'=>'form-control error', 'id'=>'password', 'placeholder'=>'Password']);?>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-lg-offset-1">
        <?=form_button(['class'=>'btn btn-primary form-control', 'id'=>'btnSubmit', 'content'=>'Sign In'])?>
    </div>
</div>

jquery:

$('#btnSubmit').click(function(e){
    e.preventDefault();
    var url = $('#loginForm').attr('action');
    var data = $('#loginForm').serialize();

    $.each($('input'), function(){
        if($(this).val().length == 0){
            $(this).parent().addClass('has-error');
            $(this).append().after('<p class="text-danger">The ' + this.id + ' field is required.</p>');
        } else {
            $(this).parent().removeClass('has-error').addClass('has-success');
            $('.text-danger').remove().after(this.id);
        }
    });
});

【问题讨论】：

标签： jquery validation

【解决方案1】：

答案：

第一个问题。在您的 jquery 代码中，您有类似的内容：

$(this).append().after('<p class="text-danger">The ' + this.id + ' field is required.</p>');

正如函数所说，这将每次都添加新段落。最好在html中隐藏一些错误信息，然后使用jquery显示/隐藏，而不是使用jquery更改html。

第二个问题。你正在使用类似的东西：

$('.text-danger').remove().after(this.id);

如果第一次输入出现错误，那么你的两个带有.text-danger 的 p-s 都会受到影响。最好使用类似的东西：

$(this).parent().find('.text-danger').remove();

这应该只删除当前错误的.text-danger。

【讨论】：

我解决了我的问题先生并发布我的答案你的第二个答案也是正确的我试过了:) 谢谢先生。

【解决方案2】：

你可以试试这个，它不是更清洁的解决方案，但很管用。

未识别错误消息，因此我添加了一个类来执行此操作（error-for-xxx）。

在测试之前删除错误以避免重复。

$('#btnSubmit').click(function(e){
    e.preventDefault();
    var url = $('#loginForm').attr('action');
    var data = $('#loginForm').serialize();

    $.each($('input'), function(){
        // First remove error message already added
        $('.text-danger.error-for-' + this.id).remove();
        // Do empty check
        if($(this).val().length == 0){
            $(this).parent().addClass('has-error');
            $(this).after('<p class="text-danger error-for-' + this.id + '">The ' + this.id + ' field is required.</p>');
        } else {
            $(this).parent().removeClass('has-error').addClass('has-success');
            
        }
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="form-group form-margin">
    <label class="col-lg-4 control-label">Username:</label>
    <div class="col-lg-7">
         <input type="text" name='username' class='form-control error' id='username'>
    </div>
</div>
<div class="form-group">
    <label class="col-lg-4 control-label">Password:</label>
    <div class="col-lg-7">
        <input type="text" name='password' class='form-control error' id='password'>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-lg-offset-1">
       <button id="btnSubmit" class="'btn btn-primary form-control">Sign In</button>
    </div>
</div>

【讨论】：

谢谢漂亮的回答女士，我也解决了我的问题并发布了我的答案。我只是使用了其他技巧:)也谢谢你

【解决方案3】：

我自己解决了问题

首先我在我的 p 标签 ID 上添加 _underscore，因为我的 p 标签和我的文本框具有相同的 ID。所以我添加 _ 以使我的 ID 与我的文本框不同。

然后在我的 IF 语句中添加删除类，然后添加新的 p 标记以避免错误消息重复。

 $('#'+this.id+'_').remove();

在我的 Else 语句中，我添加了针对我的 p 标签 ID 的删除类，并带有 _ 下划线，以删除与文本框对齐的相应错误消息。

$.each($('input'), function(){
    if($(this).val().length == 0){
        $(this).parent().addClass('has-error');
        $('#'+this.id+'_').remove(); //adding this line
        $(this).append().after('<p class="text-danger" id="'+this.id+'_">The ' + this.id + ' field is required.</p>');
        //and adding underscore on my p class id.
    } else {
        $(this).parent().removeClass('has-error').addClass('has-success');
        $('#'+this.id+'_').remove();  //adding this line
    }
});

【讨论】：