Question

我正在使用表单验证插件（formvalidation.io）来验证表单字段。我正在使用ajax将数据提交到另一个php文件进行处理。验证工作正常，但数据未提交。

以下是我的代码：

$("#ajaxsubmit").formValidation({
          framework: 'bootstrap',
          excluded: ':disabled',
          message: 'This value is not valid',
          container: 'popover',
          trigger: 'blur',
          feedbackIcons: {
              valid: 'glyphicon glyphicon-ok',
              invalid: 'glyphicon glyphicon-remove',
              validating: 'glyphicon glyphicon-refresh'
          },
          fields: {
             test: {
                validators: {
                    notEmpty: {
                message: 'The field is required and cannot be empty'
                    }
                }
            },

          },

}),
// Use Ajax to submit form data
function _(id){ return document.getElementById(id); }
function submitForm(){
    _("submitbtn").disabled = true;
    _("status").innerHTML = 'please wait ...';
    var formdata = new FormData();
    formdata.append( "test", _("test").value );
    var ajax = new XMLHttpRequest();
    ajax.open( "POST", "process.php" );
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            if(ajax.responseText == "success"){
                _("ajaxsubmit").innerHTML = '<h4>Thanks '+_("test").value+', your request has been sent.</h4>';
            } else {
                _("status").innerHTML = ajax.responseText;
                _("submitbtn").disabled = false;
            }
        }
    }
    ajax.send( formdata );
}

以下是我的表格

<form action="" method="post" class="form-horizontal" name="ajaxsubmit" id="ajaxsubmit" >
    <input name="test" id="test" class="form-control" type="text" required><br></br>
    <input name="submitbtn" type="submit" id="submitbtn" value="submit" class="btn btn-primary" onclick="submitForm(); return false;"><br></br>
    <span id="status"></span></br>
</form>

如果我禁用验证，则会提交数据。

出了点问题，但无法赶上。任何人都可以帮助我吗？

Answer 1

的结尾

$("#ajaxsubmit").formValidation({

功能以

结束

}),

将其更改为

});

当您使用逗号添加此内容时，它会阻止您的function _(id){ return document.getElementById(id); }被正确解释为全局函数，从而导致＆＃34;未定义＆＃34;尝试使用它时出错。

Answer 2

我的自定义ajax代码是罪魁祸首。我切换到jquery .ajax（），现在一切都很完美。

Ajax在验证后没有提交数据

2 个答案: