按钮点击jQuery表单验证

我有一个简单的页面，在窗体外面有一个窗体和一个按钮。我试图验证按钮单击的窗体。我已经在document.onready函数中添加了表单验证规则。但是表单没有得到验证。按钮点击jQuery表单验证

HTML： -

<html> 
<head> 
    <script src="lib/jquery1.5.2.js"></script> 
    <script src="lib/jquery.validate.js"></script> 
    <script src="lib/myjs.js"></script> 
</head> 
<body> 

<form id="form1" name="form1"> 
    Field 1: <input id="field1" type="text" class="required"> 
</form> 

<div> 
    <input id="btn" type="button" value="Validate"> 
</div> 

</body> 
</html>

JS： -

$(document).ready(function(){ 

$("#form1").validate({ 
    rules: { 
    field1: "required" 
    }, 
    messages: { 
    field1: "Please specify your name" 

    } 
}) 

$('#btn').click(function() { 
$("#form1").validate(); // This is not working and is not validating the form 
}); 

});

任何想法有什么不对？

来源

2012-12-02 ajithmanmu

您是否收到JavaScript错误？ –

不，没有JS错误。 – ajithmanmu

您使用什么插件进行验证？ – WebweaverD

在您的click处理程序中，错误是.validate()方法;它只初始化插件，它不验证form。

为了消除需要有form内的submit按钮，使用.valid()触发验证检查...

$('#btn').on('click', function() { 
    $("#form1").valid(); 
});

jsFiddle Demo

.validate() - 初始化插件（含期权）一旦DOM准备就绪。

.valid() - 检查验证状态（布尔值）或在任何时候触发对form的验证测试。

否则，如果你form容器内有一个type="submit"按钮，你不需要特殊的click处理程序和.valid()方法，因为该插件会自动捕获。

Demo without click handler

编辑：

你也有你的HTML中的两个问题......

<input id="field1" type="text" class="required">

你不需要class="required"宣布规则时在之内。这是多余的和多余的。
name属性丢失。规则在.validate()之内被name宣布。该插件依赖于独特的name属性来跟踪输入。

应该是...

<input name="field1" id="field1" type="text" />

来源

2012-12-02 17:34:37 Sparky

谢谢!! !!它的工作.. – ajithmanmu

不客气。 – Sparky

我编辑了你的答案，使它适用于不同类型的表单结构。 http://stackoverflow.com/a/28723145/2615737 –

$(document).ready(function() { 
    $("#form1").validate({ 
     rules: { 
      field1: "required" 
     }, 
     messages: { 
      field1: "Please specify your name" 
     } 
    }) 
}); 

<form id="form1" name="form1"> 
    Field 1: <input id="field1" type="text" class="required"> 
    <input id="btn" type="submit" value="Validate"> 
</form>

您还您使用类型= “按钮”。我不确定为什么你应该分开提交按钮，将它放在表单中。这样做更合适。这应该工作。

来源

2012-12-02 17:45:11 Wap

的确如此。但是我能否至少收回我的投票？哈哈只是一个微不足道的错误，而且是我的疏忽。 ; p ...我从来没有说过这是错的，我只是说它更干净。一般来说。 – Wap

为什么总是找错？试图通过尽可能快地给出一个可行的替代方案来帮助他，以便他可以利用它，如果事实证明这是他正在寻找的。这不像我在拖。交换意见是一个漫长的过程，你知道。更好看一下光明的一面，男人。 – Wap

SO是关于对特定问题的质量答复......仅此而已，没有什么不足。 – Sparky

按钮点击jQuery表单验证

回答

相关问题