时间戳

首页 > 解决方案 > 如何验证表单然后发出一个 post http 请求 jQuery

javascript - 如何验证表单然后发出一个 post http 请求 jQuery

问题描述

我正在尝试验证我的表格。例如，当用户没有输入任何值或空格时，jQuery 验证插件会检测到错误并显示一个错误消息，称为“请填写该字段”或“没有空格”。如果验证正确，将在 jQuery ajax 的帮助下发出一个 post HTTP 请求，将信息发送到服务器。目前，当用户单击提交时，我能够验证但无法发出 post HTTP 请求。这是我的代码

<script>

    function WebFormData(inLessonName) {

        this.lessonName = inLessonName;
    }

    $('#dataForm').validate({

        rules: {
            lessonName: {
                required: true,
                nowhitespace: true
            }
        },

        submitHandler: function (form) {

            var collectedLessonName = $('#lessonName').val();

            var webFormData = new WebFormData(collectedLessonName);
            var webFormDataInString = JSON.stringify(webFormData);

            $saveSessionSynopsisDataHandler = $.ajax({
                method: 'POST',
                url: '/API/Session',
                dataType: 'json',
                contentType: 'application/json;',
                data: "'" + webFormDataInString + "'"
            });
        }
    });


</script>
<form id="dataForm" role="form" class="form-horizontal">
    <label class="control-label  col-md-4" for="lessonName">lesson name</label>
    <input type="text" id="lessonName" name="lessonName" class="form-control font-bold"
           maxlength="100" placeholder="lessonName" value="" />

        <div class="col-md-10">
            <div class="pull-right">
                <input type="button" class="btn btn-primary" value="Save" id="saveButton" />
       
            </div>
        </div> 
</form>

标签： javascriptjqueryjquery-validation-engine

解决方案

使用调用函数的onsubmit方法。form如果返回false则不提交，如果是true，则表单提交。只需将我的示例添加到您的 jquery 中即可

function validation(){
  // check whatever you want to check here, return false if there is an error like white space
  if (document.getElementById("name").value.length < 1) {
    window.alert("fill the field");
    return false; // form not submited
  } else {
    // if everything is fine then you can submit
    return true;
  }
    
}
<form onsubmit="return validation()">
Name: <input type="text" name="fname" id="name">
<input type="submit" value="Submit">
</form>

推荐阅读