Onclick在原型框架上提交事件阻止Jquery驗證

Question

我試圖在表單提交之前使用jquery validatoin在原型框架上提交後，仍然無法完成它。我有以下代碼。

<script> 
jQuery(function (jQuery) { 
jQuery('#edit_form').submit(function() { 

    var valid = true; 
    var errormsg = 'required!'; 
    var errorcn = 'error'; 

    jQuery('.' + errorcn, this).remove(); 

    jQuery('.required-entry', this).each(function() { 
     var parent = jQuery(this).parent(); 
     if (jQuery(this).val() == '') { 
      var msg = jQuery(this).attr('title'); 
      msg = (msg != '') ? msg : errormsg; 
      jQuery('<span class="' + errorcn + '">' + msg + '</span>') 
       .appendTo(parent) 
       .fadeIn('fast') 
       .click(function() { 
       jQuery(this).remove(); 
      }) 
      valid = false; 
     }; 
    }); 

     return valid; 
    }); 
}) 
</script> 
      <table id="testform"> 
      <tr> 
      <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc2" name="Desc2" value="" class="required-entry input-text" type="text"title="Required" /></td> 
      <td class="mono" style="width:15%;"><input name="qta2" value="" class="qta required-entry input-text" type="text" title="Required" /></td> 
      <td style="width:15%;" class="mono"><input name="bpa2" value="" class="bpa required-entry input-text" type="text" title="Required" /></td> 
     </tr> 

     <tr> 
      <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc3" name="Desc3" value="" class="required-entry input-text" type="text"title="Required" /></td> 
      <td class="mono" style="width:15%;"><input id="qta3" name="qta3" value="" class="qta required-entry input-text" type="text" title="Required" /></td> 
      <td style="width:15%;" class="mono"><input id="bpa3" name="bpa3" value="" class="bpa required-entry input-text" type="text" title="Required" /></td> 
     </tr> 

     <tr> 
      <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc4" name="Desc4" value="" class="required-entry input-text" type="text"title="Required" /></td> 
      <td class="mono" style="width:15%;"><input id="qta4" name="qta4" value="" class="qta required-entry input-text" type="text" title="Required" /></td> 
      <td style="width:15%;" class="mono"><input id="bpa4" name="bpa4" value="" class="bpa required-entry input-text" type="text" title="Required" /></td> 
     </tr> 
     </table> 
         <div class="submit content-header"> 
          <h3 class="icon-head head-products">Page Title</h3> 
          <p class="content-buttons form-buttons"> 
           <button id="id_be" type="button" class="add" onclick="document.edit_form.submit();" style=""><span>Submit</span></button>  
          </p> 
         </div> 

         <form action="test.php?IID=1" method="post" id="edit_form" name="edit_form" enctype="multipart/form-data"> 
          <input type="hidden" id="editform" name="editform" value="1" > 
          <div style="display:none"></div> 
         </form> 

這裏http://jsfiddle.net/sammry/qBHLB/

形式只是獲取與出驗證必填字段處理的jsfiddle。請幫助！！！

Answer 1

嘗試使用的preventDefault（）函數：

$('#edit_form').submit(function (event) { 
    event.preventDefault(); 

    //rest of your code 
} 

PS：你可以使用jQuery的$，而不是對速記記錄。

如果這不起作用，嘗試一個ID設置爲您的提交按鈕並更改事件

$("#submitButtonID").click(function(event){ 
    event.preventDefault(); 

    //Validation 

    if(valid){ 
     $("#edit_form").submit(); 
    } 
} 

---

編輯：整個代碼段

<script> 
jQuery(function (jQuery) { 
jQuery('#id_be').click(function (event) { 
    event.preventDefault(); 

    var valid = true; 
    var errormsg = 'Please fill in all required fields!'; 

    jQuery('.errormessages').html(''); 

    jQuery.each(jQuery('input'), function() { 
     var parent = jQuery(this).parent(); 
     if (jQuery(this).attr('title') == 'Required' && jQuery(this).val() == '') { 

      jQuery(this).attr('background-color', '#FF0000'); 
      // This will colour the background of the required input field red to make it more obvious to the user. 

      valid = false; 
     }; 
    }); 

    if(valid){ 
     jQuery('#edit_form').submit(); 
    }else{ 
     jQuery('.errormessages').html('<p>' + errormsg + '</p>'); 
    }; 

}); 
}) 
</script> 

     <form action="test.php?IID=1" method="post" id="edit_form" name="edit_form" enctype="multipart/form-data"> 
      <div class='errormessages'></div> 
      <table id="testform"> 
      <tr> 
      <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc2" name="Desc2" value="" class="required-entry input-text" type="text"title="Required" /></td> 
      <td class="mono" style="width:15%;"><input name="qta2" value="" class="qta required-entry input-text" type="text" title="Required" /></td> 
      <td style="width:15%;" class="mono"><input name="bpa2" value="" class="bpa required-entry input-text" type="text" title="Required" /></td> 
     </tr> 

     <tr> 
      <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc3" name="Desc3" value="" class="required-entry input-text" type="text"title="Required" /></td> 
      <td class="mono" style="width:15%;"><input id="qta3" name="qta3" value="" class="qta required-entry input-text" type="text" title="Required" /></td> 
      <td style="width:15%;" class="mono"><input id="bpa3" name="bpa3" value="" class="bpa required-entry input-text" type="text" title="Required" /></td> 
     </tr> 

     <tr> 
      <td style="text-align:left; padding-left:10px;font-family:segoeui"><input id="Desc4" name="Desc4" value="" class="required-entry input-text" type="text"title="Required" /></td> 
      <td class="mono" style="width:15%;"><input id="qta4" name="qta4" value="" class="qta required-entry input-text" type="text" title="Required" /></td> 
      <td style="width:15%;" class="mono"><input id="bpa4" name="bpa4" value="" class="bpa required-entry input-text" type="text" title="Required" /></td> 
     </tr> 
     </table> 
         <div class="submit content-header"> 
          <h3 class="icon-head head-products">Page Title</h3> 
          <p class="content-buttons form-buttons"> 
           <button id="id_be" type="button" class="add" style=""><span>Submit</span></button>  
          </p> 
         </div> 

          <input type="hidden" id="editform" name="editform" value="1" > 
          <div style="display:none"></div> 
         </form>