Question

我正在使用jQuery函数中的removeClass。在谈到jQuery时，我是一个新手，经过大量的搜索和测试后，我无法真正想到答案。

我正在使用bootstrap。所以，这是我的HTML。

        <form id="flogin" method="post" action="<?php echo site_url('entrar');?>" class="form-horizontal" role="form">

        <fieldset>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="email" class="form-control" name="uemail" id="uemail" placeholder="Enter e-mail..">
        </div>
    <label for="uemail" class="error"></label>

        <br />
    <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-chevron-right"></span></span>
            <input type="password" class="form-control" name="upasswd" id="upasswd" placeholder="Enter password...">
    </div>
    <label for="upasswd" class="error"></label>

        <br />
        <button type="submit" name="loginBtn" value="Ingresar" class="btn btn-default pull-right">Login</button>
    <!--<input name="submit" type="submit" value="Submit">-->
    </fieldset>
    </form>

这是我的jQuery代码：

$("#flogin").validate({
    onkeyup:true,
    rules: {
      uemail: "required",
      upasswd: "required",
      uemail: {
        required: true,
        email: true
      },
      upasswd: {
        required: true,
        minlength: 5
      }
    },
    highlight: function(element) {
    $(element).closest('.input-group').removeClass('has-success').addClass('has-error');
  },
  success: function(element) {
    $(element).closest('.input-group').removeClass('has-error').addClass('has-success');
  },
    messages: {
      uemail: "Por favor ingrese su email",
      upasswd: "Por favor ingrese su contraseña",
      uemail: {
        required: "Por favor ingrese su email",
        minlength: "Su e-mail debe ser valido.",
        email: "Verifique que este bien escrito su e-mail"
      },
      password: {
        required: "Por favor ingrese su contraseña",
        minlength: "Tu contraseña debe contener al menos 5 carácteres."
      }
    }
  });

我无法使此代码正常工作，它会验证但是在正确输入电子邮件后不会删除has-error类。虽然它确实在错误时添加了错误类，但在再次正确输入时不会更新。

当我删除HTML 的这种和平时，它可以工作，但我不希望那里的消息，因为它打破了框并且看起来不太好。

非常感谢任何帮助。

谢谢。

Answer 1

我有三个问题，我马上就看到了......

1）onkeyup: true不是设置此选项的有效方法。 onkeyup只能设置为false或函数。如果您想要默认行为，则只需将其完全删除即可。见documentation：

验证keyup上的元素。只要该字段未标记为无效，没有任何反应。否则，将在每个密钥上检查所有规则事件。设置为false以禁用。设置为一个函数来决定你自己何时运行验证。 布尔值true无效值。

2）您在不使用highlight功能的情况下使用unhighlight功能。这两个回调函数旨在相互补充，以便在元素的无效/有效状态上切换class。 success回调仅在您想要控制/显示消息<label>时使用，该消息通常隐藏在“有效”元素上。

这样的事情会像你期望的那样更有效......

highlight: function(element) { // <-- fires when element has error $(element).closest('.input-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function(element) { // <-- fires when element is valid $(element).closest('.input-group').removeClass('has-error').addClass('has-success'); },

3）你要为两个相同的字段定义规则......

rules: { uemail: "required", // <- 'uemail' already defined below upasswd: "required", // <- 'upasswd' already defined below uemail: { required: true, email: true }, upasswd: { required: true, minlength: 5 } }

只需删除重复项......

rules: { uemail: { required: true, email: true }, upasswd: { required: true, minlength: 5 } }

Answer 2

我认为没有必要在电子邮件和密码中提供两次，你可以删除一个...... 你的完整jquery代码..

$("#flogin").validate({
    onkeyup:true,
    rules: {
       uemail: {
        required: true,
        email: true
      },
      upasswd: {
        required: true,
        minlength: 5
      }
    },
    highlight: function(element) {
    $(element).closest('.input-group').removeClass('has-success').addClass('has-error');
  },
  success: function(element) {
    $(element).closest('.input-group').removeClass('has-error').addClass('has-success');
  },
    messages: {
      uemail: "Por favor ingrese su email",
      upasswd: "Por favor ingrese su contraseña",
      uemail: {
        required: "Por favor ingrese su email",
        minlength: "Su e-mail debe ser valido.",
        email: "Verifique que este bien escrito su e-mail"
      },
      password: {
        required: "Por favor ingrese su contraseña",
        minlength: "Tu contraseña debe contener al menos 5 carácteres."
      }
    }
  });
Hope this will work....

jQuery Validation插件不删除错误类

2 个答案: