Question

我正在尝试验证表单字段，如名称（不能为空），Email_id（必须有效），移动（必须有效）。验证信息后，我必须将表单数据发布到服务器。我尝试验证表单数据，然后单击按钮将信息发布到服务器上。

my form.html

<form class="form-horizontal" id="register-form" >
    <div class="col-lg-8">      
        <div class="fieldgroup">
            <label class="col-lg-3 control-label" for="userName">Name:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style=" height: 30px;" class="form-control" id="userName" name="userName"
                    placeholder="Full Name" value="" type="text" required>
            </div>
        </div>

        <div class="fieldgroup">
            <label for="email" class="col-lg-3 control-label">Email:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style="height: 30px;" class="form-control" name="email"
                    id="email" placeholder="you@example.com" value=""
                    type="text" required>
            </div>
        </div>

        <div class="fieldgroup">
            <label for="userContactNumber" class="col-lg-3 control-label">Mobile:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style="height: 30px; width:100%;" class="form-control" id="userContactNumber"
                    name="userContactNumber" placeholder="Mobile Number"
                    onkeypress="enableKeys(event);" maxlength="10" type="text" required>
            </div>
        </div>

        <div class="fieldgroup marg-bot-45">
            <label class="col-lg-3 control-label"></label>
                <div class="col-lg-9">
                    <a href="index.html" class="btn btn-info" id="btnBooking">Confirm
                        Booking&nbsp;<span class="glyphicon glyphicon-ok"></span>
                    </a>
                    <button type="button" class="btn btn-info"
                        onclick="javascript:clearAddress();">
                        Clear&nbsp;<span class="glyphicon glyphicon-ok"></span>
                    </button>
                </div>
        </div> 
    </div>                                  
</form>

用于验证表单的

脚本

    <script type="text/javascript">
        (function($,W,D)
        {
            var JQUERY4U = {};
            JQUERY4U.UTIL =
            {
                setupFormValidation: function()
                {
                    //form validation rules
                    $("#register-form").validate({
                        rules: {
                            userName: "required",                           
                            email: {
                                required: true,
                                email: true
                            },                                              
                            userContactNumber: "required"                       

                        },
                        messages: {
                            userName: "Please enter your Name",
                            userContactNumber: "Please enter your Mobile number",                           
                            email: "Please enter a valid email address",                                            

                        },
                        submitHandler: function(form) {
                            form.submit();
                        }
                    });
                }
            }
            //when the dom has loaded setup form validation rules
            $(D).ready(function($) {
                JQUERY4U.UTIL.setupFormValidation();
            });
            })(jQuery, window, document);
    </script>

发布表单数据的脚本

<script>
    $(document).ready(function(){
    $("#btnBooking").on("click", function(e){

        // as you have used hyperlink(a tag), this prevent to redirect to another/same page
        e.preventDefault();

        // get values from textboxs 
        var uName = $('#userName').val();
        var mailId = $('#addressemailId').val();
        var mobNum = $('#userContactNumber').val();

        $.ajax({
        url:"http://192.168.1.11/services/bookService4Homes.php",
        type:"POST",
        dataType:"json",
        data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
        //type: should be same in server code, otherwise code will not run
        ContentType:"application/json",
        success: function(response){
        //alert(JSON.stringify(response));
        },
        error: function(err){
        //alert(JSON.stringify(err));
        }
        })
    });
    });
</script>

Answer 1

在您的ajax周围包裹if($("#register-form").valid()){}，只有在通过验证时才提交表单。

if($("#register-form").valid()){
     $.ajax({
        url:"http://192.168.1.11/services/bookService4Homes.php",
        type:"POST",
        dataType:"json",
        data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
        //type: should be same in server code, otherwise code will not run
        ContentType:"application/json",
        success: function(response){
            //alert(JSON.stringify(response));
        },
        error: function(err){
            //alert(JSON.stringify(err));
        }
    });
}

如何进行表单验证并在单击按钮的同一脚本中将表单数据发布到服务器？

1 个答案: