Question

我想验证此表单，但是当我提交时，它会显示缺少文本的字段但无论如何都要提交。我有两个.js文件。一个是addMembers.js，我使用ajax将表单中的成员数据添加到数据库和regValidation.js，我希望我的验证完成。正如我在问题标题中所说，它显示了需要填写哪些字段，但是在它完成之后它仍然提交......这两个文件都包含在我的header.php中

我不完全确定会导致这种情况的原因，所以请查看我的代码。我会给你的表单代码完成ajax的部分（addMembers.js），然后是regValidation，我希望我的验证完成。非常感谢！：）

表格

<?php
         include 'connect.php';
         include 'header.php';

                echo '<h2>Register</h2>';
                echo '
                <div class="container">  
                    <form id="submit" method="post" name="submit">  
                        <fieldset>  
                            <legend> Enter Information </legend>  
                                <br/>
                                    <p><label for="user_name">Your username: </label>
                                <br/>
                                    <input id="user_name" class="text" name="user_name" size="20" type="text" placeholder="Your name"></p>
                                    <p><label for="user_pass">Your password: </label>
                                <br/>
                                    <input id="user_pass" class="text" name="user_pass" size="20" type="password" placeholder="Your password"></p>

                                    <p><label for="user_pass_check">Confirm password: </label>
                                <br/>
                                    <input id="user_pass_check" class="text" name="user_pass_check" size="20" type="password" placeholder="Confirm your password"></p>


                                    <p><label for="user_email">Email: </label>
                                <br/>
                                    <input id="user_email" class="text" name="user_email" size="20" type="text" placeholder="E.g. mail@mail.com"></p>
                                <br/>
                                    <button class="button positive" type="submit"> <img src="like.png" alt=""> Register </button>  
                        </fieldset>  
                    </form>  
                <div class="success" style="display: none;"> You are now a registered user!</div>  
                </div>';   
?>

addMembers.js

    $(document).ready(function(){
      $("#formid").submit(function(e) {

            var user_name = $('#user_name').val();  
            var user_email = $('#user_email').val();
            var user_pass = $('#user_pass').val();     

            $.ajax({  
                    type: "POST",  
                    url: "ajax.php",  
                    data: "user_name="+ user_name + "&user_email=" + user_email + "&user_pass=" + user_pass, 
                    success: function(){  
                        $('form#submit').hide(function(){$('div.success').fadeIn();});  
                    }  
            });

            e.preventDefault()
            return false;  
      });

});

，这是我的regValidate.js

   $(document).ready(function()
{
    $("#formid").submit(function(e)
    {
        e.preventDefault();
        var error = false;

        $("#submit p input")
        .removeClass('error')
        .next('span')
        .remove();

        $(this).find(":text").each(function()
        {
            if ($(this).val().length == 0)
            {
                $(this).addClass('error')
                .after('<span class="error"> This field must have a value </span>');
                error = true;
            }
            else if ($(this).attr('id') == "user_email")
            {
                var theTest = $(this).val().toString();
                if (theTest.indexOf('@') == -1)
                {
                    $(this).removeClass('error')
                    .next('span')
                    .remove();

                    $(this).addClass('error')
                    .after('<span class="error"> This field must be a valid email </span>');
                    error = true;
                }
                else if (theTest.indexOf('.') == -1)
                {
                    $(this).removeClass('error')
                    .next('span')
                    .remove();

                    $(this).addClass('error')
                    .after('<span class="error"> This field must be a valid email </span>');
                    error = true;
                }
                else
                {
                    $(this).removeClass('error')
                    .next('span')
                    .remove();
                }
            }
            else
            {
                $(this).removeClass('error')
                .next('span')
                .remove();
            }
        });

        $(this).find(":password").each(function()
        {
            if ($(this).val().length == 0)
            {
                $(this).addClass('error')
                .after('<span class="error"> This field must have a value </span>');
                error = true;
            }
            else
            {
                $(this).removeClass('error')
                .next('span')
                .remove();
            }
        });

        if (error)
        {
            e.preventDefault();
            return false;
        }
        return true;
    });
}
);

然后我终于找到了解决方案！我将这两个文件合并为一个。看看吧！

$(document).ready(function(){

      $("form#submit").submit(function(e) {

        e.preventDefault();
        var error = false;

        $("#submit p input")
        .removeClass('error')
        .next('span')
        .remove();

        $(this).find(":text").each(function()
        {
            if ($(this).val().length == 0)
            {
                $(this).addClass('error')
                .after('<span class="error"> This field must have a value </span>');
                error = true;
            }
            else if ($(this).attr('id') == "user_email")
            {
                var theTest = $(this).val().toString();
                if (theTest.indexOf('@') == -1)
                {
                    $(this).removeClass('error')
                    .next('span')
                    .remove();

                    $(this).addClass('error')
                    .after('<span class="error"> This field must be a valid email </span>');
                    error = true;
                }
                else if (theTest.indexOf('.') == -1)
                {
                    $(this).removeClass('error')
                    .next('span')
                    .remove();

                    $(this).addClass('error')
                    .after('<span class="error"> This field must be a valid email </span>');
                    error = true;
                }
                else
                {
                    $(this).removeClass('error')
                    .next('span')
                    .remove();
                }
            }
            else
            {
                $(this).removeClass('error')
                .next('span')
                .remove();
            }
        });

        $(this).find(":password").each(function()
        {
            if ($(this).val().length == 0)
            {
                $(this).addClass('error')
                .after('<span class="error"> This field must have a value </span>');
                error = true;
            }
            else
            {
                $(this).removeClass('error')
                .next('span')
                .remove();
            }
        });

        if (error)
        {
            e.preventDefault();
            return false;
        }


        var user_name = $('#user_name').val();  
        var user_email = $('#user_email').val();
        var user_pass = $('#user_pass').val();     

        $.ajax({  
             type: "POST",  
             url: "ajax.php",  
             data: "user_name="+ user_name + "&user_email=" + user_email + "&user_pass=" + user_pass, 
             success: function(e){
                 if(!error){
                    $('form#submit').hide(function(){$('div.success').fadeIn();});
                 }
             }  
        });
    });
      return true;
});

我在ajax部分做了一个if语句，当它没有错误时可以通过！

Answer 1

您必须使用e.preventDefault()，以便在通过Javascript处理提交时停止提交表单：

$("form#submit").submit(function(e) {
    e.preventDefault();
    ...

提交表单时，会发生以下事件：

提交，例如通过form.submit()

触发 onsubmit

将表单提交到action属性中指定的位置。如果省略此属性，则使用当前位置。

使用event.preventDefault()可阻止3.发生。

Answer 2

您需要添加

event.preventDefault();

在您的jQuery表单提交代码的开头，因为无论您的ajax尝试运行时正在处理什么，HTML表单都将提交。通过在启动时停止提交，使用event.preventDefault（）;你可以做你的交易，只有当你对验证感到满意时，你才可以使用jQuery以编程方式提交表单。有点让你成为命运的灵魂。

要在jQuery中提交表单，请执行以下操作：

$('#formid').submit();

想要使用jQuery验证表单，但它一直在提交

2 个答案: