jquery 表单未由$(form).submit()随后提交

fgw7neuy  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(109)

我在做一个服务器端的表单验证。在[submit]按钮上,单击我的代码将字段**_validate**添加到表单中,并以 AJAX 模式将表单发送到服务器。应提交成功表单,但未提交。

$(document).ready(function(){

    $('form[action*="#validate"]').on('submit', function(e){
        var $form = $(this);
        var $submit = $form.find('input[type=submit]');
        var $validate = $form.find('input[name=_validate]');
        if ($validate.length>0 && $validate.val()=='success') // already validated
        {
            //e.returnValue = true; it's deprecated
            console.log('validated'); // #2
            return true; // supposed form submit
        }
        e.preventDefault();

        if ($validate.length==0)
            $form.append('<input type="hidden" name="_validate" value="asking" />');    
            $validate = $form.find('input[name=_validate]');
            var params = $form.serialize();
            $.ajax({
                url: $form.attr('action'),
                method: $form.attr('method').toLowerCase(),
                data: params
            })
                .then(function(response, statusText, xhrObj){
                    var json = JSON.parse(response);
                    if (json._status!='ok')
                    {
                        // writing messages
                    }
                    else
                    {
                        $validate.val('success');
                        $form.attr('action', $form.attr('action').replace('#validate', ''));
                        $form.submit(); // #1
                    }
                }); 

    });
    

});

字符串
form.submit()标记为**#1进行后续onsubmit调用,脚本打印validated**(#2),但表单不会提交-Net控制台中没有查询,没有错误或警告消息。

uqzxnwby

uqzxnwby1#

这里有一个vanilla JavaScript版本。在我看来,没有理由从一开始就不在表单中使用input元素(name="_validate")。您可以使用提交按钮上的formaction属性,而不是更改表单上的action属性。

document.addEventListener('DOMContentLoaded', e => {
  document.forms.form01.addEventListener('submit', e => {
    let form = e.target;
    let submitter = e.submitter;
    if(form._validate.value == 'success'){
      console.log('validated');
    }else{
      e.preventDefault();
      let data = new FormData(form);
      console.log(submitter.formAction);
      //fetch(submitter.formAction, { // line replaced by dataURI for testing:
      fetch('data:application/json,{"_status":"ok"}', {
        method: form.method,
        data: data
        }).then(response => response.json())
        .then(json => {
          if(json._status!='ok'){
            // writing messages
          }else{
            form._validate.value = 'success';
            console.log('Submitting...');
            form.submit();
          }
        });
    }
  });
});

个字符

相关问题