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 Validation plugin

由于您添加了“必需”属性，您只需验证表单，然后使用上述插件调用您的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

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

3 个答案: