0

无法使用 javascript 方法中的提交方法和
按钮元素上的 onclick 事件来提交表单，甚至尝试在表单标记中使用 onsubmit 事件。需要不提交详细信息的原因。您可以复制代码并运行它以获得更清晰的信息。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">`enter code here`
      function validateForm(form) {
          if (validateNames(form['hallticket'], form['hallticket_help']) && validateNames(form['firstname'], form['firstname_help'])) {
              form.submit();// Form is not getting submit
          }
          else {
              alert("Please Enter the Required Fields");

          }
      }

      function validateNonEmpty(inputField, helpText) {
          return validateRegex(/.+/, inputField.value, helpText, "please Enter a value");
      }

      function validateRegex(regex, input, helpText, helpMessage) {
          if (!regex.test(input)) {
              //Data is mismatched
              if (helpText != null) {
                  helpText.innerHTML = helpMessage;
                  return false;
              }
          }
          else {
              if (helpText != null)
              //data is matched
                  helpText.innerHTML = "";
              return true;
          }
      }

      function validateHallticket(inputField, helpText) {
          if (!validateNonEmpty(inputField, helpText)) {
              return false;
          }
          else 
              return validateRegex(/^\d{2}K91A\d{4}$/, inputField.value, helpText, "Enter valid Hallticket");
      }

      function validateNames(inputField, helpText) {
          // see that input data is non empty
          if (!validateNonEmpty(inputField, helpText)) {
              return false;
          }
          else 
              return validateRegex(/.+/, inputField.value, helpText, "Please Enter only Alphabets");
      }
    </script>
    <link rel="StyleSheet" href="test1.css" type="text/css"></link>
  </head>
  <body>
    <center>
      <font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
    </center>

    <br></br>

    <br></br>

    <form method="post" action="servlet.do" name="myform">
      <table border="1">
        <tr>
          <td>
            HallTicket: 
            <input type="text" name="hallticket" id="hallticket"
                   onblur="validateHallticket(this,document.getElementById('hallticket_help'))"></input>

            <span id="hallticket_help" class="helpcss"> </span>
          </td>
        </tr>

        <tr>
          <td>
            FirstName: 
            <input type="text" name="firstname" id="firstname"
                   onblur="validateNames(this,document.getElementById('firstname_help'))"></input>

            <span id="firstname_help" class="helpcss"> </span>
          </td>
          <td>
            LastName: 
            <input type="text" name="lastname" id="lastname"
                   onblur="validateNames(this,document.getElementById('lastname_help'))"></input>

            <span id="lastname_help" class="helpcss"> </span>
          </td>
        </tr>
      </table>
      <center>
        <input type="button" value="SUBMIT" onclick="validatForm(this.form)"></input>
      </center>
    </form>
  </body>
</html>
4

3 回答 3

0

除了您的代码中已经发现的问题之外，还有一个问题。您的按钮提交输入标签是： <input type="button" value="SUBMIT" onclick="validatForm(this.form)"></input>

并且必须是： <input type="submit" value="SUBMIT" onclick="validateForm(this.form)"/>

于 2013-02-11T13:52:47.800 回答
0

这解决了很多问题

演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
function validateNonEmpty(inputField, helpTextId) {
  var helpText = document.getElementById(helpTextId);
  return validateRegex(/.+/, inputField.value, helpText, "please Enter a value");
}

function validateRegex(regex, input, helpText, helpMessage) {
  if (regex.test(input)) {
      if (helpText != null) {
        helpText.innerHTML = "";
      }    
      return true;
  }
  //Data is mismatched
  if (helpText != null) {
    helpText.innerHTML = helpMessage;
  }    
  return false;
}

function validateHallticket(inputField, helpText) {
  if (!validateNonEmpty(inputField, helpText)) {
    return false;
  }
  return validateRegex(/^\d{2}K91A\d{4}$/, inputField.value, helpText, "Enter valid Hallticket");
}

function validateNames(inputField, helpText) {
  // see that input data is non empty
  if (!validateNonEmpty(inputField, helpText)) {
    return false;
  }
  return validateRegex(/.+/, inputField.value, helpText, "Please Enter only Alphabets");
}

window.onload=function() {
  document.getElementById("myform").onsubmit=function() {

    if (validateNames(this['hallticket'], 'hallticket_help') &&
        validateNames(this['firstname'], 'firstname_help')  &&
        validateNames(this['lastname'], 'lastname_help')) {
      return true;
    }

    alert("Please Enter the Required Fields");
    return false; // cancel submit
  }
}
    </script>
    <link rel="StyleSheet" href="test1.css" type="text/css"></link>
  </head>
  <body>
    <center>
      <font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
    </center>

    <br></br>

    <br></br>

    <form method="post" action="servlet.do" name="myform" id="myform">
      <table border="1">
        <tr>
          <td>
            HallTicket: 
            <input type="text" name="hallticket" id="hallticket"
                   onblur="validateHallticket(this,'hallticket_help')" />

            <span id="hallticket_help" class="helpcss"> </span>
          </td>
        </tr>

        <tr>
          <td>
            FirstName: 
            <input type="text" name="firstname" id="firstname"
                   onblur="validateNames(this,'firstname_help')" />

            <span id="firstname_help" class="helpcss"> </span>
          </td>
          <td>
            LastName: 
            <input type="text" name="lastname" id="lastname"
                   onblur="validateNames(this,'lastname_help')" />

            <span id="lastname_help" class="helpcss"> </span>
          </td>
        </tr>
      </table>
      <center>
        <input type="submit" value="SUBMIT" />
      </center>
    </form>
  </body>
</html>
于 2013-02-11T13:09:33.787 回答
0

请检查您在 onclick 中调用的函数的拼写，其拼写错误为“validatForm”而不是“validateForm”

于 2013-02-11T13:03:22.380 回答