jquery ajax 확인이 실패하고 문제를 해결하기 위해 양식이 제출됩니다_jquery

validationEngine은 프런트엔드 양식 검증 작업을 많이 줄여줍니다. 대부분의 경우 우리는 여러 가지 방법으로 검증 엔진을 사용하여 양식을 검증합니다.

1 일반 양식 제출을 사용하세요. 이 경우 유효성 검사 엔진이 확인에 실패하면 양식이 제출되지 않습니다.

2 Ajax를 사용하여 양식을 제출하되, Ajax 확인을 사용하지 마세요.

이 방법도 비교적 간단합니다. Ajax 요청을 사용하기 전에 확인이 통과되었는지 확인하세요. 예:

코드 복사 코드는 다음과 같습니다.

//인증 실패 시 반환
If(!$("form#ajaxForm").validationEngine("validate")) return
$.ajax({
유형: "POST",
URL: $("#ajaxForm").attr("action"),
데이터: $("#ajaxForm").serialize(),
데이터 유형: "html",
성공: 함수(데이터){
                                                    })

3 일반 양식을 사용하여 제출하지만 ajax 검증을 사용합니다. 이 방법은 양식을 제출할 때 ajax 검증을 통과하지 못하더라도 양식을 제출할 수 있습니다. 인터넷에서 소스 코드를 변경하는 경우 다음은 스크린샷입니다.

이 방법은 현재 상황에서는 가능합니다. 이 수정 방법 자체는 권장되지 않으며, 제가 발견한 것 중 하나는 다음과 같은 상황이 발생할 때입니다.

코드 복사 코드는 다음과 같습니다.

함수 beforeCall(form,options){

If(window.console){
console.log("양식 제출 확인을 통과한 후 Ajax 제출 전 콜백"); }; true를 반환합니다.
}; //
함수 ajaxValidationCallback(status,form,json,options){
If(window.console){
console.log(상태)
}; If(상태 === true){
Alert("양식이 유효합니다!"); }  
}; jQuery(문서).ready(함수(){
jQuery("#formID").validationEngine({
ajaxFormValidation: true, //Ajax를 사용하여 양식을 제출할지 여부
ajaxFormValidationMethod: 'post', //Ajax가 제출할 때 데이터를 보내는 방법 설정
onAjaxFormComplete: ajaxValidationCallback, //Ajax 확인이 완료된 후 양식 제출
onBeforeAjaxFormValidation: beforeCall //양식 제출 확인을 통과한 후 Ajax 제출 전 콜백
})
})



beforeCall 이 메소드는 호출되지 않으므로 아직 사용할 수 없습니다

4 ajax를 사용하여 양식을 검증하고 제출하는 방법은 헷갈리고, 위의 소스코드를 수정하는 방법도 사용하기 쉽지 않습니다.

세 번째, 네 번째 방법에 대한 해결 방법은 다음과 같습니다.

Ajax 확인을 사용하는 양식 태그에 사용자 정의 속성 control="userName,email"을 추가합니다. 속성 값은 ajax를 사용하여 확인할 컨트롤의 ID입니다(여러 컨트롤은 쉼표로 구분됨).

코드 복사

코드는 다음과 같습니다.

확인해야 하는 각 컨트롤에 url(ajax 요청 주소) 및 error(실패 시 프롬프트 메시지) 두 가지 속성을 추가합니다.

코드 복사

코드는 다음과 같습니다.

자바스크립트에서 두 개의 전역 배열 선언

코드 복사 코드는 다음과 같습니다.

var controlId = new Array(); //검증에 실패한 컨트롤 ID 저장
var error = new Array(); //인증 실패에 대한 프롬프트 메시지 저장

양식 태그에서 컨트롤 속성 값을 가져오고(각 컨트롤 ID를 구분하려면 쉼표를 사용), ajax를 사용하여 요청을 순회하고, 확인에 실패하면 컨트롤 ID와 프롬프트 정보를 controlId에 추가하는 것이 아이디어입니다. 및 오류 및 프롬프트 정보. 양식을 제출할 때 controlId가 비어 있지 않은지 확인하세요.

코드 복사 코드는 다음과 같습니다.

$(함수() {
var ajaxForm2Controls = $("form#ajaxForm2Controls")
//양식이 제출될 때
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls)
          false 반환 ;                                 }) ; //포커스를 잃었을 때 컨트롤 유효성 검사
valControls(ajaxForm2Controls)
})

양식 제출 방법:

코드 복사 코드는 다음과 같습니다.

함수 ajaxForm2Control(obj) {

//오류 메시지가 있을 때 반환하고 오류 메시지를 표시합니다
If(controlId.length > 0) {
경고정보()
          false 반환 ;                                      }  
If(!$(obj).validationEngine("validate")) return false; //Ajax 확인을 사용하지 않는 컨트롤을 확인합니다(Ajax 확인되지 않은 필드는 정상적으로 확인될 수 있으며 실패하면 반환됩니다)
$.ajax({
유형: "POST",
URL: $(obj).attr("action"),
데이터: $(obj).serialize(),
데이터 유형: "html",
성공: 함수(데이터){
~ ~ })
}



양식에 포커스 이벤트 추가

코드 복사

코드는 다음과 같습니다.

//
형식으로 확인해야 하는 컨트롤 함수 valControls(ajaxForm2Controls) {
//Ajax 확인이 필요한 컨트롤 가져오기
varcontrolStr = ajaxForm2Controls.attr("control")
//속성이 정의되지 않은 경우 반환
If(typeof(controlsStr) === "정의되지 않음" || ControlStr.length <= 0) return
//컨트롤 ID를 별도로 획득
var 컨트롤 =controlStr.split(/,/g)
for(control의 var i) {
//포커스 이탈 이벤트 추가
           $("#" 컨트롤[i]).blur(function() { 
If($(this).val().length <= 0) return false
//배열 재설정
                  controlId.length = 0;                                       errors.length = 0;                          //오류 메시지
            var error = $(this).attr("error") ;   $.ajax({
유형: "GET",
​​​​​​ URL: $(this).attr("url"),
데이터: $(this).serialize(),
데이터 유형: "텍스트",
성공: 함수(데이터){
If(data==="true") {
//검증에 실패하면 오류 메시지를 배열에 넣습니다
~ ~            controlId.push(controls[i]);                                                       errors.push(error);                                 >                               경고정보()
~                 ~               });                                     }) ;                          }  
}



오류 메시지:





코드 복사

코드는 다음과 같습니다.

//팝업 메시지
함수 경고정보() {
If(controlId.length > 0) {
for(var i in controlId) {
//validationEngine 메소드, 지정된 ID에 대한 프롬프트를 표시합니다.
                                                     // 사용법:$("#id").validationEngine("showPrompt","Prompt content","load")
~ | 이 요소에 대한 프롬프트는 "pass", "error", "load"                  $("#" controlId[i]).validationEngine("showPrompt", 오류[i], "error")
~ }  
}

이런 식으로 세 번째나 네 번째 방법으로 양식을 제출할 때 제출하기 전에 controlId를 호출하여 값이 있는지 확인할 수 있습니다.