2014-09-27 36 views
0

这里是我的HTML和Ajax代码都是我下面的问题是,当我使用了Ajax ID #insert然后form不要求 输入input type="text"验证哪有可能两者我都用ajax插入和验证 在此先感谢 这里我的HTML代码表单验证时使用AJAX ID

<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> 
+0

你会得到ajax调用命中? – 2014-09-27 04:35:59

+0

你可以plz帮助如何可以验证使用我的ajax代码.. – pop 2014-09-27 04:36:01

+0

是的,我已经得到了阿贾克斯打电话 – pop 2014-09-27 04:36:32

回答

0

基本形式验证/ AJAX提交。

<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> 
+0

其中我使用$('#divAjaxLoaderGif')。show(); //显示加载消息。 – pop 2014-09-27 06:01:35

+0

请参阅装载机现货的修订版。 – Rasclatt 2014-09-27 06:23:43

0

JQuery验证方法使用Ajax提交表单

<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>