양식 입력의 유효성을 확인한 후에 버튼 클릭시 javascript 메서드를 호출하는 방법

Question

기본적으로 특정 필드를 채우고 선택하는 양식 인 ASP.NET MVC 웹 페이지가 있습니다. 트위터 부트 스트랩도 사용하고 있습니다.

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

자바 스크립트 파일은 mywork.js generateFile() 메소드를 포함하고, 입력 된 항목을 이용하여 파일을 생성한다.

ItemTextBox가 비어 있지 않음을 확인하려면 어떻게해야합니까? 추가 된 항목이 여러 개있을 수 있으므로 각 텍스트 요소를 확인하고 싶지는 않습니다. 필자는 입력에 필수 = "필수"를 설정했습니다. 필수 필드의 자동 유효성을 검사하려면 어떻게해야합니까?

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> 

양식 제출이 완료되면 (양식이 필요한 모든 필드가 채워질 때까지 제출되지 않음) 브라우저가 양식을 서버에 제출하지 못하게하십시오.

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

DEMO

Answer 2

나는이 링크는 당신을 도울 수 있다고 생각 :

당신이 "필요"속성을 추가로 Jquery Validation plugin

, 당신은 단지 형태를 확인하고 위의 플러그인을 사용하여 자바 스크립트 메서드를 호출 할 수 있습니다 :

$("#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