Question

单击“保存”按钮，我需要在文本字段上执行某些验证需要的名称，最小长度，最大长度。

我正在为此目的使用jquery validation.js文件

这是我的jsfiddle

<form id="myform">
    <input type="text" id="name" placeholder="Name" class="icon-user" /> <a href="#" class="savedata">Save</a>
</form>



$(document).ready(function () {
    $('#myform').validate({
        rules: {
            name: {
                required: true
            }
        },
        messages: {
            name: {
                required: 'name required'
            }
        }
    });
});

$(document).on("click", ".savedata", function (e) {
    alert('do an ajax call here');
});

我需要做所有验证，如果所有验证通过，我需要调用savedata事件监听器。

任何人都可以帮助我，为什么验证方法没有被调用？

这是我的完整HTML代码

<html>
   <head>
      <title>OrderMySnack</title>
      <script src="js/jquery-1.9.1.js"></script>
      <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
   </head>
   <body class="vendorBg">
      <form id="myform">
         <input type="text" id="name" placeholder="Name" class="icon-user">
         <a href="#" class="fillBtn">Save</a>
      </form>
<script>
$(function(){
$('#myform').validate({
    focusInvalid: false,
    rules: {
        name: {
            required: true
        }
    },
    messages: {
        name: {
            required: 'name required'
        }
    }
});
});

$(document).on("click", ".fillBtn", function(e) {
alert('do an ajax call here');
        });    
</script>
</body>
</html>

Answer 1

尝试以下代码。在输入框中添加了名称属性，在点击事件中添加了有效（）方法

<form id="myform">
 <input type="text" id="name" name="name" placeholder="Name" class="icon-user" /> 
<a href="#" class="savedata">Save</a> 
</form>
$(document).ready(function () {
$('#myform').validate({
    rules: {
        name: {
            required: true
        }
    },
    messages: {
        name: {
            required: 'name required'
        }
    }
});
});



$(document).on("click", ".savedata", function (e) { 
    $('#myform').valid();
  alert('do an ajax call here');
});

我的HTML没有触发jquery validate插件

1 个答案: