验证表单输入后如何在按钮单击上调用javascript方法

Question

我有一个ASP.NET MVC网页，该网页本质上是一种填写和选择某些字段的表格。 我也在使用Twitter Bootstrap。

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()" />

javascript文件mywork.js包含generateFile（）方法，并使用输入的项目创建文件。

如何验证ItemTextBox不为空？ 可以添加许多项目，因此我显然不想检查每个文本元素。 我已经为输入设置了required =“ required”。 如何自动验证必填字段？

Answer 1

没有任何插件，对于浏览器的默认验证，请使用<form></form>包裹输入元素。 并将"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>

提交表单时调用generateFile函数（在填写所有必填字段之前，您的表单不会提交），并阻止浏览器将表单提交到服务器。

document.getElementById('myform').onsubmit = function(e) {
    generateFile();
    e.preventDefault();
}
function generateFile(){
    alert('Generating File');
}

DEMO

Answer 2

我认为此链接可能会帮助您：

jQuery验证插件

添加了“ required”属性后，您只需验证表单，然后使用上述插件调用javascript方法即可：

$("#myform").validate({
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then:
    $(form).submit();
  }
 });

Answer 3

您是否尝试过jQuery验证引擎，它是一个非常不错的插件，可以非常轻松地验证表单控件。 只需看下面的链接（它是一个演示）

http://www.position-relative.net/creation/formValidator/demos/demoValidators.html

要下载和获取文档，请访问

https://github.com/posabsolute/jQuery-Validation-Engine