JQuery 폼 유효성 검사 및 스크립트 충돌 발생

간단한 JQuery/Ajax 뉴스 레터 가입 양식을 작성한 다음 JQuery 유효성 검사를 추가하기 위해 사실을 확인했다. 나는 javascript/jquery에 대해별로 경험이 없다. 며칠 동안이 작업을하고 아이디어가 부족하지 않습니다.JQuery 폼 유효성 검사 및 스크립트 충돌 발생

각 스크립트는 개별적으로 작동합니다. 유효성 검사기는 제출 코드가 제거 된 경우 제대로 작동합니다 (지정된 양식 작업 URL로 정상적으로 작동하지만). 제출 스크립트는 유효성 검사기 코드가 제거 된 상태에서 완벽하게 작동합니다. 그러나 두 가지 모두를 사용하면 유효성 검사가 수행되지 않고 양식이 여전히 제출 스크립트를 통해 제출됩니다.

둘을 통합하려는 나의 모든 시도는 비참하게 실패했습니다.

분명히 뭔가 중요한 것을 놓치고 있습니다. 심지어 올바른 방향으로 조금 찔러은 상당히

여기 전체의 코드이다 주시면 감사하겠습니다 :

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 


<!-- form validator --> 
<script> 
$(document).ready(function(){ 
// run validator, specifies name of css div that will be displayed 
// on error and hide when corrected 
$("#nl").validate({ 
errorContainer: "#errorcontainer", 
}); 
}); 
</script> 


<!-- form submit --> 
<script> 
$(function() { 
// These first three lines of code compensate for Javascript being turned on and off. 
// It changes the submit input field from a type of "submit" to a type of "button". 

var paraTag = $('input#submit').parent('b'); 
$(paraTag).children('input').remove(); 
$(paraTag).append('<input type="button" name="submit" id="submit" value="Submit" />'); 

$('input#submit').click(function() { 

    $("#response").css("display", "none"); 
    $("#loading").css("display", "block"); 

    $.ajax({ 
     type: 'GET', 
     url: 'http://app.icontact.com/icp/signup.php', 
     data: $("form").serialize(), 
     complete: function(results) { 
    setTimeout(function() { 

    $("#loading").css("display", "none"); 
    $("#response").css("display", "block"); 
    }, 1500); 
     } 
    }); // end ajax 
}); 
}); 
</script> 



<style type="text/css"> 
<!-- 
#errorcontainer { 
display: none; 
} 
#response { 
display: none; 
} 
--> 
</style> 
</head> 
<body> 
<div id="newsletter"> 
<form id="nl" method="post" action=""> 
<div id="heading">Sign up for the NCMP newsletter </div> 
<div> 
    <input name="fields_fname" type="text" id="fields_fname" class="required" value="First Name" size="25" /> 
</div> 
<div> 
    <input name="fields_email" class="example-default-value" type="text" id="fields_email" value="Email address" /> 
</div> 
<b> 
    <input type="submit" name="submit" id="submit" value="Submit" /> 
</b> 
<div id="response">from submit script - shows on success</div> 
<div id="loading"></div> 
</form> 
</div> 
<div id="errorcontainer">from validator script - shows on error</div> 
</body> 
</html>

감사합니다, 그것은 click 같은 검증 jQuery를 방지하지 않습니다 보인다 - 밥

출처

2011-07-31 Bob S.

. 이것은 의미가 있습니다. 플러그인이 아마도 submit 이벤트를 두드리고있을 것이라고 확신합니다.

jQuery 유효성 검사를 사용할 때 AJAX 기능을 통합하는 가장 좋은 방법은 아마도 submitHandler 콜백에있을 것입니다.

$("#nl").validate({ 
    errorContainer: "#errorcontainer", 
    submitHandler: function() { 
     $("#response").css("display", "none"); 
     $("#loading").css("display", "block"); 

     $.ajax({ 
      type: 'GET', 
      url: 'http://app.icontact.com/icp/signup.php', 
      data: $("form").serialize(), 
      complete: function(results) { 
       setTimeout(function() { 
        $("#loading").css("display", "none"); 
        $("#response").css("display", "block"); 
       }, 1500); 
      } 
     }); 
    } 
});

submitHandler 콜백의 코드는 (바닐라 HTTP 요청을하는 것입니다) 양식 제출의 기본 동작을 대체합니다 그래서 단순히 주변에 몇 가지 코드를 이동의 문제가 될 것이다.

출처

2011-07-31 02:05:23

음 ... 나는 우드 쉐딩을하고 있습니다. 이것은 챔피언처럼 일했고, 고마워요. –

@Bob : 괜찮 았으면 대답을 받아 들여주세요. –

JQuery 폼 유효성 검사 및 스크립트 충돌 발생

답변

관련 문제