jquery不提交表格

时间:2014-05-26 08:02:11

标签: javascript jquery html forms

您好我正在尝试在提交前使用jquery验证表单。验证工作正常,但从不提交。

有以下形式:

<form class="form-signin panel-body" role="form" action="addUser" method="post" id="register">
                    <h2 class="form-signin-heading">Sign Up</h2>

                    <div id="na" class="form-group">
                        <input type="text" id="name" name="name" class="form-control" placeholder="Name" required>
                    </div>

                    <div id="su" class="form-group">
                        <input type="text" id="surname" name="surname" class="form-control" placeholder="Surname" required>
                    </div>

                    <div id="user" class="form-group">
                        <input type="text" id="username" name="username" class="form-control" value="<%= request.getParameter("username1") %>" placeholder="Username" required>
                    </div>

                    <div id="mail" class="form-group">
                        <input type="email" id="email" name="email" class="form-control warning" value="<%= request.getParameter("email1") %>" placeholder="Email address" required>
                    </div>

                    <div id="pa" class="form-group">
                        <input type="password" id="password" name="password" class="form-control" value="<%= request.getParameter("password1") %>" placeholder="Password" required> 
                    </div>

                        <select class="form-control" id="year" name="year">
                            <option value="">Year</option>
                        </select>
                        <select class="form-control" id="month" name="month">
                            <option value="">Month</option>
                        </select>
                        <select class="form-control" id="day" name="day">
                            <option value="">Day</option>
                        </select>


                    <div class="row">
                        <span>&nbsp;</span>
                    </div>
                    <label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </label>
                    <label>
                        By clicking Sign up, you are agree to our<a data-toggle="modal" href="#terms"> Terms and
                        Conditions</a> and have read our usage policy data, including ouruse of 
                        <a data-toggle="modal" href="#cookies">cookies</a>. 

                    </label>
                    <button id="send" class="btn btn-lg btn-primary btn-block" >Sign in</button>
                </form>

主要是我想拒绝重复用户名或电子邮件地址。这是我的jquery脚本:

$(document).ready(function() {
        $("#register").submit(function(event){
    //  $("#register").click(function(){    
            var $username = $("#username").val();
            var $mail = $("#email").val();

        // Evita que si alguna comprovacio retorna false s'envi el formulari
        event.preventDefault();

        // Funcio que valida que el nom no estigui en blanc
        if($("#name").val().trim() == ""){
            $("#na").addClass( "has-error");
            return false;
        }

        // Funcio que valida que el cognom no estigui en blanc
        if($("#surname").val().trim() == ""){
            $("#su").addClass( "has-error");
            return false;
        }

        // Funcio ajax per validar que el nom d'usuari no està en ús
        $.ajax({
            url: "/projCreditV1/rwsc/as/check-value/user_name/" + $username,
            success: function(data){
                // Si retorna TRUE vol dir que el nom d'usuari es valid perque no està en ús
                if(data == "true"){
                    $("#mail").removeClass("has-error");
                    return true;
                }
                else{
                    $("#user").addClass("has-error");
                    return false;
                }
            }
        });

        // Funcio ajax per validar que el mail no està en ús
        $.ajax({
            url: "/projCreditV1/rwsc/as/check-value/mail/" + $mail,
            success: function(data){
                // Si retorna TRUE vol dir que el mail es valid perque no està en ús
                if(data == "true"){
                    $("#mail").removeClass("has-error");
                    return true;
                }
                else{
                    $("#mail").addClass("has-error");
                    return false;
                }
            }
        });

        // Funcio que valida que la contrasenya no estigui en blanc
        if($("#password").val().trim() == ""){
            $("#pa").addClass( "has-error");
            return false;
        }

        });

    });

当某些字段不符合要求时返回false。我认为如果整个表格没有返回虚假,应该提交..

由于

2 个答案:

答案 0 :(得分:3)

请删除event.preventDefault();

如果您使用该代码,它将永远不会执行该表单。

答案 1 :(得分:1)

提交未完成的原因是:
event.preventDefault();线。返回不适用于异步请求。因为它不会将值返回给事件。

解决这个问题的方法是:

  1. 制作一个普通按钮而不是提交按钮
  2. 让jquery做 提交。