按钮单击事件无响应 [英] button click event non responsive
问题描述
我正在使用jQuery表单验证插件，当用户在表单为空时单击提交"按钮时，需要显示一个错误.但是，我的点击事件没有响应.
I am using jQuery form validation plugin and I need to display an error when a user clicks a submit button while the form is empty. However, my click event is not responsive.
<!DOCTYPE HTML>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="css/bootstrap.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery- validation/jquery.validate.js"></script>
<script src="js/bootstrap.js"> </script>
<script>
$('#submit').click(function(){
$('form').validate()
});
</script>
</head>
<body>
<form class = "well span6">
<label> Username </label>
<input type="text" id = "myName" class ="span3" placeholder ="Type your username here..." class = "required"/>
<label> Password</label>
<input type="text" id "myPassword" class ="span3" placeholder ="Type your password here..." class = "required"/> <br/>
<button id = "submit" class ="btn btn-primary">Submit </button>
<button class = "" > Clear <br/></button><br/>
</form>
</body>
</html>
任何帮助都会受到赞赏和奖励.
Any help will be appreciated and rewarded.
推荐答案
将.validate()绑定到click或submit事件时，仅在第一次单击时首先初始化插件.由于首次单击该按钮时验证插件尚未准备就绪，因此没有任何反应或行为异常.
When you bind .validate() to a click or submit event, you are only first initializing the plugin on the first click. Since validation plugin was not ready when you first clicked the button, nothing happens or it behaves unexpectedly.
正如已经指出的那样，您只需要在DOM就绪时初始化插件即可.该插件已经内置了事件处理程序，可以处理各种事件(包括submit点击)自动验证表单.
As already pointed out, you simply need to initialize the plugin on DOM ready. The plugin already has event handlers built in that take care of validating the form automatically on various events, including the submit click.
$(document).ready(function() {
$('form').validate();
});
您在input元素上还具有两个 class属性，这导致required类被忽略.
You also had two class attributes on your input elements which was causing the required class to be ignored.
<input type="text" id="myName" class="span3" placeholder="Type your username here..." class="required" />
简单地将它们组合在一起:
Simply combine them:
<input type="text" name="myName" id="myName" class="span3 required" placeholder="Type your username here..." />
我还为每个input元素添加了name属性.
I also added the name attribute to each input element.
工作演示:
这篇关于按钮单击事件无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
