양식 외부에있는 버튼을 사용하여 양식을 제출하고 jQuery 유효성 검사를 실행하십시오.

Question

jQuery 유효성 검사 플러그인을 사용하고 양식에서 ajax를 사용하여 양식을 제출합니다. 나는 페이지가 사용되는 것에 따라 페이지를위한 버튼을 생성하는 부동 버튼 막대를 가지고있다. 이 버튼은 form 태그 외부에 있습니다. 내 양식의 ID는 계정 설정입니다. 내 document.ready 이미 있음 :

$("#account-settings").validate({ 
     rules: { 
       email: {email: true} 
       }, 

     messages: { 
         email: {email: "Enter a valid email address."} 
       }, 
    }) 

거기에 양식에 대한 설정을 저장하는 버튼이 있습니다. 여기에 클릭 이벤트가있다 : 기본적으로, 나는 분명히 플러그인 권리를 사용하지 않는 ... 내가 버튼을 클릭하면

$('#savesettings').click(function() { 

if($('#account-settings').valid()){ 
    alert("Valid form"); 
} 
else{ 
    alert("Not valid"); 
} 
} 

아무런 변화가 없습니다 그래서, 누군가가 가르치 려? 당신이 그 형태의 외부의 버튼을 사용하여 양식을 제출하려면

Answer 1

당신이 좋아하는 버튼 뭔가를 클릭하면 사용자에 따라 양식을 직렬화 할 필요가

..

$('#savesettings').click(function() { 

var $as = $('#account-settings'); 

if($as.valid()){ 

    $.post(
     /* your server page */ 
     , $as.serialize() 
     , /* your callback function */ 
    ); 

    } 

    else{ 
    alert("Not valid"); 
    } 

}); 

I 양식을 자바 스크립트가있는 사용자가되지 않습니다이 방법을 제출하여 명백한 접근성 함정을 지적해야 그것을 사용할 수 있습니다.

Answer 2

, 당신은 지금처럼 trigger() 함수를 사용해야합니다 ... 문서 위에 읽는 계속하지만 난 아무것도 표시되지 않습니다 :

$('body').on('click', '#my-button', function(){ 
    $('#account-settings').trigger('submit'); 
}); 

유효성 검사 플러그인이 정상적으로 작동해야합니다.

Answer 3

JS 함수는 닫는 괄호를 사용할 수 있습니다. 다음과 같이 시도하십시오 :

$('#savesettings').click(function() { 
    if($('#account-settings').valid()){ 
    alert("Valid form"); 
    } else { 
    alert("Not valid"); 
    } 
});