отправить форму после проверки JQuery

Question

У меня есть следующая форма:

<form id="form" action="comments.php" method="post">
  <ul>
    <li><div class="formbox_titles">Name</div><input type="text" name="name" class="required comm_input" /></li>
    <li><div class="formbox_titles">Email</div><input type="text" name="email" class="required comm_input"/></li>
    <li><div class="formbox_titles">Message</div><textarea name="message" class="required comm_text"></textarea></li>
    <li><input type="submit" value="Submit"></li>
  </ul>
</form>

и следующий JQuery для отправки формы:

target: '#preview', 
  success: function() { 
  $('#formbox').slideUp('fast'); 
}

Теперь проблема в том, что у меня также есть код проверки формы JQuery

$().ready(function() {
    // validate comment form
    $("#form").validate({ 
    });
});

Они оба прекрасно работают, и форма выдает всплывающее предупреждение о том, что все три поля не могут быть пустыми, но дата внутри формы все равно отправляется в базу данных. Я использую следующий код для проверки формы http://bassistance.de/jquery-plugins/jquery-plugin-validation/ Итак, вопрос в том, как добавить первый jquery в секунду, чтобы первый был выполнен после заполнения обязательных полей?

Надеюсь, кто-нибудь поможет. Спасибо.

Answer 1

Если вы хотите отправить форму вручную, вы должны пропустить связанное событие jQuery.Вы можете сделать это одним из следующих способов:

$('#form_id')[0].submit();

или

$('#form_id').get(0).submit();

[0] или get (0) дает вам объект DOM вместо объекта jQuery.

Answer 2

Из вашего примера мне не ясно, каков поток управления вашей страницы, однако я предполагаю, что вы где-то вызываете метод submit() После того, как вы проверили форму и перед ее отправкой, проверьте ее проверку методом valid(). Ваш код должен выглядеть примерно так:

$("#form").validate();
if ($('#form').valid())
    $('#form').submit();

Answer 3

Я ничего не знаю о вашем плагине валидации, но обычно вы можете использовать этот код

<script>

    $("form").submit(function() {
      if (validationIsTrue()) {
        return true;
      }
      else {
        return false;
      }
    });
</script>

Вы должны выполнить проверку и затем вернуть true / false в функцию отправки формы. Если плагин возвращает значение bool, вы можете попробовать что-то вроде этого:

$("form").submit(function() {
   return $(this).validate({ .... });
});

Answer 4

Когда вы говорите, что «дата внутри формы отправлена», это не имеет смысла для меня, потому что в ваших фрагментах кода я не вижу ничего, что называется «дата».

Я широко использовал плагин .validate () ... Могу вам сказать, что может помочь то, что используемый вами плагин проверки имеет функцию submitHandler, которую вы можете использовать ...

// validate comment form
$("#form").validate({
submitHandler : function(form) {
    //do something here
    form.submit();
}
});

submitHandler вызывается, только если соблюдены все правила проверки.А именно, в вашем случае у вас есть три поля с «обязательным» на них, что означает, что эта форма НЕ будет отправлена, если все три поля не имеют значения.при условии, что нет ничего, чтобы указать на проблему, которую вы описываете.Предоставление дополнительной и более качественной информации поможет нам понять, что не так.

Answer 5

Вы можете использовать submitHandler из плагина проверки формы JQuery

<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $(".form").validate({
        rules: {
            userName: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            userName: {
                required: "specify userName"
            },
            password: {
                required: "specify password"
            }
        },
        errorClass: "help-inline text-danger",
        errorElement: "span",
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error');
            $(element).parents('.form-group').addClass('has-success');
        },
        submitHandler: function(form,e) {
            e.preventDefault();
            console.log('Form submitted');
            $.ajax({
                type: 'POST',
                url: 'authenticate.jsp',
                dataType: "html",
                data: $('form').serialize(),
                success: function(result) {
                    window.location.href = "dashboard.jsp";
                },
                error : function(error) {

                }
            });
            return false;
        }
    });

});  
</script>