Html5 유효성 검사 성공 후 함수 호출

Question

일부 텍스트 상자와 제출 단추가 있습니다. HTML5 'required'유효성 검사를 사용했습니다. 잘 작동합니다. 이제 HTML5 유효성 검사에서 오류를 찾지 못했을 때 버튼 클릭으로 함수를 호출하고 싶습니다. 필요한 필드가 제공되지 않으면 버튼 클릭으로 해당 기능이 호출되지 않습니다.

Answer 1

에 일반 자바 스크립트의 형태가 될 수있다. 개인적으로, jQuery를 사용하면 작업을 쉽게하고 모든 브라우저 간 일관성을 고려할 수 있으므로 도움이됩니다. jQuery를 사용할지 여부는 선택 사항이며, 다른 대화 일지 여부에 관계없이 다음 예제는 데모입니다. 여기

이 검증 듣기 기능을 달성 jQuery를 사용하여 가상의 예입니다 :

<form> 
    <input type="text" class="input-text" required> 
    <input type="text" class="input-text" required> 
    <input type="submit" id="submit" class="input-button" disabled> 
</form> 

JS

$textInputs = $('input.input-text'); 
$textInputs.on('keyup', function() { 
    var $validTextInputs = $('input.input-text:valid'), 
     $submit = $('#submit'); 
    console.log($textInputs.length, $validTextInputs.length); 
    if($textInputs.length === $validTextInputs.length){ 
     //all text fields are valid 
     $submit.attr('disabled', null); 
    } else { 
     //not all text fields are valid 
     $submit.attr('disabled', ''); 
    } 
});​ 

CSS

을

HTML을 (시각적으로, 때, 이제 저희에게 알려 입력이 유효 함)

.input-text:valid { 
    background: green; 
}​ 

여기 행동의 예를 참조하십시오 http://jsfiddle.net/m6QXc/

Answer 2

글쎄, 이것을 시도해 볼 수 있습니다 : fiddle example 필요에 따라 확장하고 jQuery를 사용합니다. 당신은 당신이 내 원하는대로 추가 할 수 있습니다 : 당신은 form.onsubmit 핸들러를 사용할 수 있습니다

$('#exampleForm').submit(function(e){  
      e.preventDefault();  

      // here you can call your own js methods, send form with ajax? 
      // or what ever you want 
     }); 

Answer 3

. 폼의 ID를 가정하면 form입니다 : 당신은이 작업을 수행하는 몇 가지 추가적인 도움이 필요 해요

var form = document.getElementById("form"); 
form.onsubmit = function() { 
    //Pre-submission validation. 

    //Return true or false based on whether the validation passed. 
    //return false will prevent the submission the form. 
}; 

Answer 4

사용 JQuery와 당신은 그것을 위해 자바 스크립트가 필요합니다 HTML5의 양식 유효성 검사 후

<form id="myForm"> 
     <input type="text" class="input-text" required> 
     <input type="submit" id="submit" class="input-button" disabled> 
    </form> 


    $("myForm").submit(function(){ 
     // Your code  
    })