希望使用jQuery验证表单，但表单仍在提交

我想验证此表单，但当我提交时，它会显示缺少文本的字段，但它仍会提交。我有两个.js文件。一个是addMembers.js，我使用ajax将表单中的成员数据添加到数据库中，另一个是regValidation.js，我希望在这里完成验证。正如我在问题标题中所说，它显示了哪些字段需要填写，但在填写之后，它还是提交了。。。这两个文件都包含在my 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>';   
?>

这是我的regValidate.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;  
      });

});  

   $(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;
    });
}
);

$（文档）.ready（函数（）
{
$（“#formid”）.提交（功能（e）
{
e、 预防默认值（）；
var错误=错误；
$（“#提交p输入”）
.removeClass（'错误'）
.next（'span'））
.remove（）；
$（this.find（“：text”）.each（function（）
{
if（$（this）.val（）.length==0）
{
$（this.addClass（'error'））
.after（'此字段必须有值'）；
错误=真；
}
else if（$（this.attr（'id'）==“用户\电子邮件”）
{
var theTest=$（this.val（）.toString（）；
如果（测试索引（'@'）=-1）
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
$（this.addClass（'error'））
.after（'此字段必须是有效的电子邮件'）；
错误=真；
}
else if（测试索引（'.'）=-1）
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
$（this.addClass（'error'））
.after（'此字段必须是有效的电子邮件'）；
错误=真；
}
其他的
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
}
}
其他的
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
}
});
$（this.find（“：password”）.each（function（）
{
if（$（this）.val（）.length==0）
{
$（this.addClass（'error'））
.after（'此字段必须有值'）；
错误=真；
}
其他的
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
}
});
如果（错误）
{
e、 预防默认值（）；
返回false；
}
返回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;
});  

$（文档）.ready（函数（）{
$（“提交表格”）。提交（功能（e）{
e、 预防默认值（）；
var错误=错误；
$（“#提交p输入”）
.removeClass（'错误'）
.next（'span'））
.remove（）；
$（this.find（“：text”）.each（function（）
{
if（$（this）.val（）.length==0）
{
$（this.addClass（'error'））
.after（'此字段必须有值'）；
错误=真；
}
else if（$（this.attr（'id'）==“用户\电子邮件”）
{
var theTest=$（this.val（）.toString（）；
如果（测试索引（'@'）=-1）
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
$（this.addClass（'error'））
.after（'此字段必须是有效的电子邮件'）；
错误=真；
}
else if（测试索引（'.'）=-1）
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
$（this.addClass（'error'））
.after（'此字段必须是有效的电子邮件'）；
错误=真；
}
其他的
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
}
}
其他的
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
}
});
$（this.find（“：password”）.each（function（）
{
if（$（this）.val（）.length==0）
{
$（this.addClass（'error'））
.after（'此字段必须有值'）；
错误=真；
}
其他的
{
$（this.removeClass（'error'））
.next（'span'））
.remove（）；
}
});
如果（错误）
{
e、 预防默认值（）；
返回false；
}
var user_name=$（'#user_name'）.val（）；
var user_email=$（'#user_email'）.val（）；
var user_pass=$（'#user_pass'）.val（）；
$.ajax（{
类型：“POST”，
url:“ajax.php”，
数据：“user_name=“+user_name+”&user_email=“+user_email+”&user_pass=“+user_pass，
成功：职能（e）{
如果（！错误）{
$（'form#submit'）.hide（function（）{$（'div.success'）.fadeIn（）；}）；
}
}  
});
});
返回true；
});  

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

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

event.preventDefault(); 

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