Question

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

例如：

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

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

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

问题2 如果用户名有值且不为空，如何修复错误消息。？

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

Answer 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当前错误。

Answer 2

你可以试试这个，这不是更清洁的解决方案，但是那个工作。

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

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

<LocationMatch "/amp">
    ModPagespeedDisableFilters defer_javascript 
</LocationMatch>

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

Answer 3

我解决了自己的问题

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

然后在我的IF语句中添加remove类，然后附加一个新的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
    }
});

使用jQuery

3 个答案: