Question

以下示例是我们尝试使用的，以防止用户在任何框为空白时提交表单。

如果任何输入文本框为空白，则输入文本框周围会有一个红色矩形。

以下是代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

  <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>

  <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>


  <style type='text/css'>
    .error {
    border: 2px solid #f00;
}

.valid {
    border: 2px solid #0ff;
}

form, input {
    margin: 10px;
}
#docs {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true
            }
        },
        errorPlacement: function(){
            return false;
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});
});//]]>  

</script>


</head>
<body>
  <form id="myform">

    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

</body>

</html>

我们想使用onMouseOver事件而不是onClick事件。

这样，如果框为空白，则输入文本框将变为红色矩形，而不必先单击“提交查询”。

我需要更改哪些内容才能使其成为onMouseOver事件？

Answer 1

为提交按钮添加mouseenter处理程序

$('#myform input[type="submit"]').mouseenter(function(){
    $('#myform').valid()
})

演示：Fiddle

我们想使用onMouseOver事件而不是OnClick事件。可能吗？

1 个答案: