Как использовать плагин проверки jQuery с подтверждением на стороне сервера на уровне формы?

Какой лучший способ инициировать ошибки в элементах для ошибок проверки на стороне сервера, которые возвращаются после того, как форма передает начальную проверку на стороне клиента?

$("#contact_form").validate({
  submitHandler: function(form) {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: '/contact/send',
      data: $(form).serialize(),
      success: function(response) {
        if(response.error) { //server came back with validation issues
          var fields = response.fields;
          for(var i=0, var len = fields.length; i < len; i++) {
            var field_name = fields[i].name;
            var field_error = fields[i].error;

            // TRIGGER ERROR ON AFFECTED ELEMENT

          }
          return false;
        }
        //everything went ok, so let show a thanks message
        showThanks();
      }
    }
});

Я думаю что-то вроде:

$(form).find("[name='" + field_name + "']").triggerError(field_error);

Но я не видел никаких методов api для ручного запуска ошибок таким образом.

Ответы

Ответ 1

Я думаю, что я понял это из документации Validator/showErrors

var validator = $("#contact_form").validate();
validator.showErrors({"state": "Bad state."});

Ответ 2

Сделайте это. Напишите плагин, который будет делать все, что вы хотите. Или, если вам сложно, просто напишите функцию javascript, чтобы сделать это и назовите это.

Я бы написал плагин, который создавал бы div, заполнял его текстом ошибки и анимировал бы его красиво.

Ответ 3

При отправке формы я сделал бы цель формы невидимым iframe на странице, которая затем вызывала бы функцию в topWindow с результатом.

<iframe id="subject_frame" name="submit_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

то на странице iframe вызывается метод javascript в верхнем окне, который либо перенаправляет на успех, либо отображает ошибки.

В iframe

<script language="javascript" type="text/javascript">
   window.top.window.submitComplete("<?php echo $response; ?>");
</script>

В верхнем окне (в качестве примера)

function uploadComplete( result ){
    $.unblockUI();
    if(result == "OK"){
        $.blockUI({ message: "<span style='color:green;'>File upload successful, request submitted.</span><br/><br/>Redirecting..." }); 
        setTimeout(function() { 
            $.unblockUI({ 
                onUnblock: function(){ window.location='thankyou.php'; } 
            }); 
        }, 2000);

    } else {
        $.blockUI({ message: "<span style='color:red;'>Failed.</span><br/><br/>"+result }); 
        $('.blockOverlay').attr('title','Click to remove').click($.unblockUI);
    }
}