如何通过表单验证启用取消按钮?

时间:2014-04-09 16:27:56

标签: javascript forms validation cancel-button

我正在使用frmvalidator javascript here找到我的代码。

我必须创建自定义验证,因为我正在验证具有相同id的两个输入字段(我正在使用数组)。验证工作正常,但现在的问题是当我点击cancel按钮时,验证仍然生效,这意味着除非我填写所有字段,否则我无法关闭dialog box

This error message still appears when I click cancel.

这是我的代码:

<form name="UpdateIndustry" action="addIndustry.jsp" method="get">
  <table align="center">                
    <c:forEach var="row" items="${paramValues.industries}">
      <jsp:setProperty property="tableId" name="bean" value="${row}"/>
      <c:set var="ctr" value="${ctr + 1}"/>
      <input type="hidden" name="hello" value="${row}"/>
      <tr><th>INDUSTRY NAME</th>
          <td><div id='UpdateIndustry_industryName_errorloc' style="color:red;"></div>
              <input type="text" name="industryName" size=40 value="${bean.thisIndustry.INDUSTRYNAME}"/></td></tr>
    </c:forEach>
    <input type="hidden" name="finalCount" value="${ctr}"/>
    <tr><td style="text-align:center" colspan="3">
        <input type=submit name="submit" value="Update Industry" onclick="btnUpdate_click()"/>
        <input type=submit name="submit" value="Cancel" onclick="btnCancel_click()"/></td></tr>
  </table>  
</form>

script

<script language="JavaScript">
    var frmvalidator  = new Validator("UpdateIndustry");
    frmvalidator.EnableOnPageErrorDisplay();
    frmvalidator.EnableMsgsTogether();
    function btnUpdate_click(){
        frmvalidator.setAddnlValidationFunction(FinalValidator); }                  
    function btnCancel_click(){
        frmvalidator.clearAllValidations();
        window.close(); }   
</script>

这是验证发生的FinalValidator函数。

function FinalValidator()
{
   var myForm = document.forms["UpdateIndustry"];
   if (myForm.industryName.length > 0) {
      for(var i=0; i <= myForm.industryName.length; i++)
        {
          if(myForm.industryName[i].value.length == 0)
            {
              sfm_show_error_msg('Please enter industry name.', myForm.industryName[i]);
              return false;
            }
        }
   }
   return true;
}

如何让cancel按钮起作用?在此先感谢您的帮助! :)

1 个答案:

答案 0 :(得分:0)

$(document).ready(function () {
    $("#YourButtonID").click(function () {
        error = false;
        $(".span1").remove();
        if ($("#YourTextBoxID").val() == "") {
            $("#YourTextBoxID").after("<span class='span1'>Write Your Error</span>");
            error = true;
        }
    });
});

试试这个。