Question

我使用AJAX提交表单值，并且在此过程中我想验证表单，如果表单中的任何字段为空，则不应提交表单。虽然AJAX编码工作得非常好，但我无法弄清楚如何停止提交表单。

不想使用Jquery插件

$(document).ready(function () {
    $("#sub").click(function (event) {
        event.preventDefault();
        $.ajax({
            url: "register_insert.php",
            method: "post",
            data: $('form').serialize(),
            datatype: "html",
            success: function (strMsg) {
                $("#Imsg").html(strMsg);
            }

        })

    })

    $('input').blur(function ()
    {
        if (!$(this).val())
        {
            $('#Imsg').html('Field required');
        }
    })
})

Answer 1

由于您不想使用已经编码的jQuery插件，因此您需要编写函数来测试表单的有效性。然后，如果表单有效，则可以使用AJAX代码。

＆＃13;

.red-border{
    border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type='text' class='isrequired' name='mytext'/>
<input type='text' class='' name='mytext2'/>
<input type='text' class='isrequired' name='mytext3'/>
<button type='submit' value='submit' id='sub'>Submit</button>
</form>

＆＃13;

protractor

＆＃13;

Answer 2

你不需要Javascript / jQuery来做到这一点。您可以在输入字段上使用required="required"属性，使用纯HTML标记所需的字段。

<form action="" method="post">
  <input type="text" name="name" required="required"/>
  <br/>
  <input type="submit"/>
</form>

请参阅JSFiddle：https://jsfiddle.net/gb2kw01w/2/

仅在表单经过验证时才应提交字段值

不想使用Jquery插件

2 个答案: