Ajax 양식이 유효성 검사를 무시합니다.

Question

전에 아약스를 많이 사용하지 않았으므로 jQuery Form plugin을 선택했습니다. 제 목표는 플러그인이 제출 한 양식을 가지고 양식을 제출하는 경우 양식 필드가 올바르게 채워 졌는지 확인하기 위해 유효성 검증을 사용하는 것입니다.

유효성 확인을 제외한 위의 모든 작업이 유효합니다. '제출'을 클릭하면 유효성 검사가 잠시 표시되고 ajax 양식 스크립트에서 성공 호출을 설정하면 상자가 사라집니다. 제출을 보장하기 위해 필요한 추가 단계 경우 정지가있는 경우

var options = { 
    beforeSubmit: validation, 
    success: function() { 
     var url = '/includes/embed-topbar-login-account'; 
     $('#account').load(url, function() { 
      $('#account-options').fadeOut('slow'); 
     }); 
    } 
}; 

$('#login').ajaxForm(options); 

function validation() { 
    var prompt = '<div class="required-prompt"><small>This field is required.</small></div>'; 
    var promptEmail = '<div class="required-prompt"><small>Invalid email address.</small></div>'; 
    var required = true; 

     $('.required-prompt', this).remove(); 
     $('.required', this).each(function() { 
      if(!$(this).val()) { 
       $(this).after(prompt); 
       required = false; 
      } else { 
       $('.required-prompt', this).remove(); 
      } 
     }); 

    return required; 
} 

사람은 말해 줄 수 검증 반환 '거짓'(그것이 현재 않습니다).

Answer 1

당신은 당신이 beforeSubmit를 사용하여 해당 코드에 validate 메소드를 호출하지 않는 beforeSubmit

SOURCE Documentation

$('#login').ajaxForm({ 
    success: function() { 
     var url = '/includes/embed-topbar-login-account'; 
     $('#account').load(url, function() { 
      $('#account-options').fadeOut('slow'); 
     }); 
    }, 
    beforeSubmit: function(arr, $form, options) { 
    // The array of form data takes the following form: 
    // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 

    // return false to cancel submit     
    return validate(); //Assuming validate is your function doing validation. 

    } 
});