Question

在我允许用户按下提交按钮之前，我试图验证此表单中的所有输入都是类.has-success。问题是，一旦达到所有输入并且它们都具有.has-success类，该按钮将不会激活。这是我的代码：

jQuery的：

$('#groupUsuario, #passwordVerificationUsuario, #passwordUsuario, #nombreUsuario').on('click change blur focus', function(){
     if ($('#groupUsuario').hasClass('has-success') && $('#passwordVerificationUsuario').hasClass('has-success') && $('#passwordUsuario').hasClass('has-success') && $('#nombreUsuario').hasClass('has-success')){
        $('#ingresarUsuario').attr('disabled', false);
     } else  $('#ingresarUsuario').attr('disabled', true);
});

这是HTML：

 <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="well text-center">
                        <div class="panel panel-primary">
                            <h1 class="text-center">Weiver - Usuarios</h1>
                            <hr>
                            <div class="panel-body">
                                <form method="post" role="form" enctype="multipart/form-data">
                                    <div id="nameUserValidation" class="form-group">
                                        <label class="control-label" for="nombreUsuario">Nombre del Usuario</label>
                                        <input type="text" class="form-control" name="nombreUsuario" id="nombreUsuario" placeholder="nombre del cine">
                                    </div>
                                    <div id="passwordUserValidation" class="form-group">
                                        <label class="control-label" for="passwordUsuario">Contraseña</label>
                                        <input type="password" class="form-control" name="passwordUsuario" id="passwordUsuario" placeholder="nombre del cine">
                                    </div>
                                    <div id="passwordVerificationUserValidation" class="form-group">
                                        <label class="control-label" for="passwordVerificationUsuario">Verificar Contraseña</label>
                                        <input type="password" class="form-control" name="passwordVerificationUsuario" id="passwordVerificationUsuario" placeholder="nombre del cine">
                                    </div>
                                    <div id="groupUserValidation" class="form-group">
                                        <label class="control-label" for="groupUsuario">Grupo al que Pertenece</label>
                                        <select class="form-control" name="groupUsuario" id="groupUsuario">
                                            <option value="nada">Seleccione un Grupo</option>
                                        </select>
                                    </div>
                                </form>
                                <hr>
                                <div class="well" style="margin-bottom: 0 !important;">
                                    <p style="text-align: justify"><strong>Nota: </strong>Que todos los campos estan verdes no significa que la informacion ingresada esta correcta. Solo significa que se ingreso informacion en todos los campos, que se terminara de validar cuando se mande al servidor.</p>
                                    <button type="submit" name="ingresarUsuario" id="ingresarUsuario" class="btn btn-success pull-right" disabled="disabled">ingresar Usuario</button>
                                    <a href="menu.php" class="btn btn-default pull-left">Menú Principal</a>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

它一定是傻事，也许有人可以发现错误，我现在已经编了10个小时了，我有点头晕。我在另一个表单上有相同的示例，并且在那个表单上，它确实有效，当检查的所有输入都具有.has-success类时，该按钮会将其disabled属性更改为“”。

欢迎任何帮助以及建设性的批评！

Answer 1

我想我之前遇到过这类问题。您是否尝试删除disabled属性？像那样：

$('#groupUsuario, #passwordVerificationUsuario, #passwordUsuario, #nombreUsuario').on('click change blur focus', function(){
    if ($('#groupUsuario').hasClass('has-success') && $('#passwordVerificationUsuario').hasClass('has-success') && $('#passwordUsuario').hasClass('has-success') && $('#nombreUsuario').hasClass('has-success')){
        $('#ingresarUsuario').removeAttr('disabled');
    } else {
        $('#ingresarUsuario').attr('disabled', true);
    }

}）;

另外，我还建议在输入中添加一个默认类（或者数据 - *属性，如果它与样式无关），并在每个click上进行比较，{{1} }，change，blur两个jQuery数组的长度：focus和$('.need-success')。那会更具可读性。

Answer 2

我会尝试使用FireBug或类似方法来隔离您的问题，以便观察您对.attr（'disabled'，...）的调用是否正确命中。

考虑使用.removeAttr（'disabled'）而不是.attr（'disabled'，false）。

Answer 3

不要紧。我发现了错误。我应该使用div的ID来设置bootstrap的错误类，而不是实际的输入ID。

去过40min试图找到错误。它现在有效。

这是代码：

 $('#nombreUsuario, #passwordUsuario, #passwordVerificationUsuario, #groupUsuario').on(
'click blur focus mouseleave mouseenter change', function(){
     if (
           $('#nameUserValidation').hasClass('has-success')
           &&
           $('#passwordUserValidation').hasClass('has-success')
           &&
           $('#passwordVerificationUserValidation').hasClass('has-success')
           &&
           $('#groupUserValidation').hasClass('has-success')
         ){
              $('#ingresarUsuario').attr('disabled', false);
     } else   $('#ingresarUsuario').attr('disabled', true); 
});

我在.hasClass（）验证的输入中使用了相同的ID。

使用.hasClass（）验证我的所有输入都是前端有效，以提交表单不起作用

3 个答案: