[英]How to call javascript method on button click after the form inputs have been validated
I have an ASP.NET MVC web page which is essentially a form to fill in and select certain fields. 我有一个ASP.NET MVC网页,该网页本质上是一种填写和选择某些字段的表格。 I am using twitter bootstrap as well.
我也在使用Twitter Bootstrap。
My.cshtml My.cshtml
@{
ViewBag.Title = "MyWork";
}
@section Scripts {
@Scripts.Render("~/scripts/mywork.js")
@Scripts.Render("~/scripts/typeahead.min.js")
}
<br />
<legend>Add items to enable work</legend>
<div class="row">
<div class="col-md-2">
Item name:
</div>
<div class="col-md-8">
<input id="ItemTextBox" name="Name" type="text" placeholder="Enter an item name ..." class="form-control" required="required" autofocus="autofocus" />
</div>
</div>
<legend>Generate file</legend>
<input id="GenerateFile" type="submit" class="btn btn-primary" value="Generate File" onclick="javascript:generateFile()" />
The javascript file mywork.js contains the generateFile() method and creates a file using the items entered. javascript文件mywork.js包含generateFile()方法,并使用输入的项目创建文件。
How should I validate that the ItemTextBox is not empty? 如何验证ItemTextBox不为空? There can be a number of items added so I obviously don't want to check for each text element.
可以添加许多项目,因此我显然不想检查每个文本元素。 I have set the required="required" for the inputs.
我已经为输入设置了required =“ required”。 How can I auto-validate the required fields?
如何自动验证必填字段?
Without any plug-in, for browser's default validation, wrap your input elements with <form></form>
. 没有任何插件,对于浏览器的默认验证,请使用
<form></form>
包裹输入元素。 And add "required"
attribute to all required input fields. 并将
"required"
属性添加到所有必填字段。
<form id="myform">
<p><span>Item 1</span> <input name="Item 1" type="text" placeholder="Enter an item name"required="required" autofocus="autofocus" /></p>
<p><span>Item 2</span> <input name="Item 2" type="text" placeholder="Enter an item name"required="required" autofocus="autofocus" /></p>
<p><span>Item 3</span> <input name="Item 3" type="text" placeholder="Enter an item name"required="required" autofocus="autofocus" /></p>
<p><input type="submit" value="Generate File"/></p>
</form>
Call generateFile function when form get submitted (your form won't get submitted until all required fields are filled) and prevent browser from submitting form to server. 提交表单时调用generateFile函数(在填写所有必填字段之前,您的表单不会提交),并阻止浏览器将表单提交到服务器。
document.getElementById('myform').onsubmit = function(e) {
generateFile();
e.preventDefault();
}
function generateFile(){
alert('Generating File');
}
I think this link might help you: 我认为此链接可能会帮助您:
Jquery Validation plugin jQuery验证插件
As you have added a "required" attribute, you can just validate a form and then call your javascript method using the above plugin: 添加了“ required”属性后,您只需验证表单,然后使用上述插件调用javascript方法即可:
$("#myform").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
$(form).submit();
}
});
did you tried jQuery validation engine, its a nice and best plugin to validate your form controls very easily. 您是否尝试过jQuery验证引擎,它是一个非常不错的插件,可以非常轻松地验证表单控件。 Just have a look at below link (its a demo)
只需看下面的链接(它是一个演示)
http://www.position-relative.net/creation/formValidator/demos/demoValidators.html http://www.position-relative.net/creation/formValidator/demos/demoValidators.html
To download and for documentation visit 要下载和获取文档,请访问
https://github.com/posabsolute/jQuery-Validation-Engine https://github.com/posabsolute/jQuery-Validation-Engine
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.