Question

这里是我的html和ajax代码都低于我的问题是当我使用ajax id #insert然后form未通过输入input type="text"验证时怎么可能我都使用ajax插入和验证提前致谢这是我的HTML代码

<div class="form-group">
 <input type="text" class="form-control required" name="OPRID"  id="OPRID"  
    minlength="5"  required/>
 <input type="text" class="form-control required" name="OPRDEFNDESC"  id="OPRDEFNDESC" 
      required>


      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       <a id="insert"> <button  type="Submit" name="submit" class="btn btn-primary"> 
          Save changes</button>
                </a>       


    **ajax jquery code:**
       <script type="text/javascript">

      $(document).ready(function(){
    $("#insert").click(function(){

      var OPRID=$("#OPRID").val();
      var OPRDEFNDESC=$("#OPRDEFNDESC").val();
    $.post('opr_insert.php', {OPRID: OPRID, OPRDEFNDESC: OPRDEFNDESC},
         function(data){
     $("#message").html(data);
     $("#message").hide();
    $("#message").fadeIn(1500); //Fade in the data given by the insert.php file
          });
    return false;
       });
     });
     </script>

Answer 1

使用ajax提交表单的jquery验证方法

<form role="form" method="post" action="" name="formname" id="formname">
    <div class="form-group">
     <input type="text" class="form-control required" name="OPRID"  id="OPRID"  
        minlength="5"  required/>
     <input type="text" class="form-control required" name="OPRDEFNDESC"  id="OPRDEFNDESC" 
          required>

     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button  type="Submit" name="submit" class="btn btn-primary">Save changes</button>
    </div>
    </form>

jquery验证方法

   jQuery("#formname").validate({
                            errorClass:"errormassagevalide",
                            rules: {
                             OPRID: "required",
                            OPRDEFNDESC: "required"
                            //other form element 

                        },
                        messages: {
                             OPRID: "please  insert please ",
                            OPRDEFNDESC: " please  insert OPRDEFNDESC"
                        },
                        highlight: function(element) {
                            jQuery(element).parent().addClass("has-error");
                        },
                        unhighlight: function(element) {
                            jQuery(element).parent().removeClass("has-error");
                        },
                        submitHandler: function(form) {//your ajax code
                             setTimeout(function(){
                                    var data = {

                                         OPRID: jQuery("#OPRID").val(),
                                         OPRDEFNDESC: jQuery("#OPRDEFNDESC").val(),

                                        };

                                    jQuery.ajax(ajax_object.ajax_url, {
                                        type: "POST",
                                        data: data,
                                        cache: false,
                                        success: function (response) {
                                            alert(response);



                                        },
                                        error: function (error) {
                                            if (typeof console === "object") {
                                                console.log(error);
                                            }
                                        },
                                        complete: function () {
                                        }
                                    });

                                 }, 100);
                        },
                    });

jquery.validate.js是必需的

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

Answer 2

基本表单validate / ajax submit。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form id="makevalid">
    <input type="text" class="form-control required" name="OPRID"  id="OPRID" minlength="5" required />
    <input type="text" class="form-control required" name="OPRDEFNDESC"  id="OPRDEFNDESC"  required />
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button  type="Submit" name="submit" class="btn btn-primary">Save changes</button>
</form>
<div id="message"><div id="loader"></div></div>

<script type="text/javascript">
$(document).ready(function() {

    $("#makevalid").validate({
        submitHandler: function(form) {
                // You could put loader here.
                $("#loader").html("LOADING...");
                $.ajax({
                        url: '/link/to/form.php',
                        type: 'POST',
                        data: $('#makevalid').serialize(),
                        success: function (result) {
                                $("#message").html(result);
                            }
                });
          },
        rules: {
            OPRID: "required",
            OPRDEFNDESC: "required"
        },
        messages: {

            OPRID: "required",
            OPRDEFNDESC: "required"
        }
    });

});
</script>

使用ajax id时表单验证无效

2 个答案: