2

我正在与 jQuery 函数中的 removeClass 纠缠不清。当谈到 jQuery 时，我是一个新手，经过大量搜索和测试后，我真的想不出答案。

我正在使用引导程序。所以，这是我的 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 类。虽然它确实在错误时添加了 has-error 类，但在再次正确输入时不会更新。

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

任何帮助将不胜感激。

谢谢你。

4

2 回答 2

4

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

1) onkeyup: true不是设置此选项的有效方法。 onkeyup只能设置为false或函数。如果您想要默认行为，您只需将其完全省略即可。请参阅文档：

验证 keyup 上的元素。只要该字段未被标记为无效，就不会发生任何事情。否则，将检查每个按键事件的所有规则。设置false为禁用。设置为 Function 以自行决定何时运行验证。 布尔值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
    }
}
于 2013-11-12T18:09:01.440 回答
0

我认为没有必要在 uemail 和 upasswd 中提供两次，您可以删除一次...您的完整 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....
于 2013-11-12T13:58:20.133 回答