Question

我有代码，我在jquery mobile中进行了javascript验证。但问题是表单已提交，即使验证表单返回false。可能是什么原因请回复？以下是我的代码。

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>  
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
    // Validate Contact Table
    function validateContact() {
        var emergencyContactElt = document.getElementById("Emergency_Contact");
        var emergencyContactEltRows = emergencyContactElt.rows;
        var maxrowNbr = emergencyContactElt.rows.length;
        var error = 0;
        for (var i = 1; i < maxrowNbr; i++) {
            // Validation for First Name
            if (emergencyContactEltRows[i].cells[1].children[0].children[0].value == "") {
                emergencyContactEltRows[i].cells[1].children[0].children[0].style.background = '#e35152';
                emergencyContactEltRows[i].cells[1].children[0].focus();
                error = error + 1;
            } else {
                emergencyContactEltRows[i].cells[1].children[0].children[0].style.background = 'white';
            }

            // Validation for Last Name
            if (emergencyContactEltRows[i].cells[2].children[0].children[0].value == "") {
                emergencyContactEltRows[i].cells[2].children[0].children[0].style.background = '#e35152';
                emergencyContactEltRows[i].cells[2].children[0].focus();
                error = error + 1;
            } else {
                emergencyContactEltRows[i].cells[2].children[0].children[0].style.background = 'white';
            }

            // Validation phone number
            if (emergencyContactEltRows[i].cells[3].children[0].children[0].value == "") {
                emergencyContactEltRows[i].cells[3].children[0].children[0].style.background = '#e35152';
                emergencyContactEltRows[i].cells[3].children[0].focus();
                error = error + 1;
            } else {
                emergencyContactEltRows[i].cells[3].children[0].children[0].style.background = 'white';
            }

        }

        if (error > 0) {
            return false;
        } else {
            return true;
        }
    }

    //Validate Form 
    function validateForm() {
        var error = 0;
        if (!validateContact()) {
            error++;
            alert("Contact");
        }

        // Don't submit form if there are errors
        if (error > 0) {
            alert(error);
            alert("highlight fields are required");
            return false;
        } else {
            return true;
        }
    }        </script>
</head>

	<body>
		<form name="submitform" id="submitform" method="post" action="%bind(:25)" onsubmit="return validateForm();" >
		<table id="Emergency_Contact" name="Emergency_Contact">
			<tbody>
				<tr>
    				<th>Relationship</th>
    				<th>First Name</th>
					<th>Last Name</th>
					<th>Phone</th>
					<th>Email Id</th>
					<th>Consent</th>
					<th>Working/Studying In ADU</th>
					<th>Employee Id/Student ID</th>
					<th>Add/Delete</th>
 				</tr>
				<tr>
					<td>
						<select name="Relationship" id="Relationship" class="Relationship" style="width:100%"> 
							<option value="B" selected="">Brother</option>
							<option value="D">Daughter</option>
							<option value="E">Employee</option>
							<option value="ER">Employer</option>
							<option value="ES">Ex-Spouse</option>
						</select>
					</td> 
					<td> 
						<input name="First_Name" id="First_Name" value="" style="width:100%" type="text">
					</td> 
						<input name="Last_Name" id="Last_Name" value="" style="width:100%" type="text">
					</td> 
					<td>
						<input name="Phone" value="" style="width:100%" type="text">
					</td>   
				</tr> 
			</tbody>
		</table>
			<div data-role="ui-grid-a">
             	<div class="ui-block-a" style="width:50%">
					<input type="button" id="Previous" value="Previous" onclick="window.location.href='%bind(:24)'"/>
 				</div>
				<div class="ui-block-b" style="width:50%">
					<!--<input type="Submit" id="Submit" value="Save and Next" class="ui-btn ui-shadow"/>-->
					<input type="Submit" id="Submit" value="Save and Next" />
				</div>
			<div>
		</form>
	</body>
</html>

Answer 1

您有控制台错误。但是为什么不使用jQuery - 在这里你不再需要onsubmit，只需添加

.error { background-color:#e35152}

并且

$(function() {
  $("#submitform").on("submit", function(e) {
    $(this).find("input[type='text']").each(function() {
      $(this).toggleClass("error", $.trim(this.value) == "");
    });
    if ($(".error").length > 0) {
      e.preventDefault();
      alert("highlight fields are required");
    }
  });
});

$(function() {
  $("#submitform").on("submit", function(e) {
    $(this).find("input[type='text']").each(function() {
      $(this).toggleClass("error", $.trim(this.value) == "");
    });
    if ($(".error").length > 0) {
      e.preventDefault();
      alert("highlight fields are required");
    }
  });
});

 .error {
   background-color: #e35152
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="submitform" id="submitform" method="post" action="%bind(:25)">
  <table id="Emergency_Contact" name="Emergency_Contact">
    <tbody>
      <tr>
        <th>Relationship</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Phone</th>
        <th>Email Id</th>
        <th>Consent</th>
        <th>Working/Studying In ADU</th>
        <th>Employee Id/Student ID</th>
        <th>Add/Delete</th>
      </tr>
      <tr>
        <td>
          <select name="Relationship" id="Relationship" class="Relationship" style="width:100%">
            <option value="B" selected="">Brother</option>
            <option value="D">Daughter</option>
            <option value="E">Employee</option>
            <option value="ER">Employer</option>
            <option value="ES">Ex-Spouse</option>
          </select>
        </td>
        <td>
          <input name="First_Name" id="First_Name" value="" style="width:100%" type="text">
        </td>
        <td>
          <input name="Last_Name" id="Last_Name" value="" style="width:100%" type="text">
        </td>
        <td>
          <input name="Phone" value="" style="width:100%" type="text">
        </td>
      </tr>
    </tbody>
  </table>
  <div data-role="ui-grid-a">
    <div class="ui-block-a" style="width:50%">
      <input type="button" id="Previous" value="Previous" onclick="window.location.href='%bind(:24)'" />
    </div>
    <div class="ui-block-b" style="width:50%">
      <!--<input type="Submit" id="Submit" value="Save and Next" class="ui-btn ui-shadow"/>-->
      <input type="Submit" id="Submit" value="Save and Next" />
    </div>
    <div>
</form>

Answer 2

原始问题正在发生，因为缺少＆lt; td＆gt;在＆＃39; last_name＆＃39;之前输入。这导致＆＃39; validateContact＆＃39;函数抛出异常。

对于像这样的所有简单要求，最好使用原生内容而不是jquery。尝试使用＆＃39; querySelector＆＃39;选择要处理的DOM节点的方法。

为什么在validateform（）返回false时提交表单？

2 个答案: