Question

在网上查看以及此论坛上类似问题的先前答案......仍然无法解决此问题。

尝试熟悉JS / HTML5约束验证。

我已经设置了一个脚本，它可以通过一个小表单自行运行。但是，当我将它集成到一个更大的形式，与其他JS代码，它不再有效。我无法解决原因。请注意，我故意使用不同的方法来调用验证函数，因此我可以了解它们的工作原理。 “＆＃39;事件监听器＆＃39;脚本2中的代码不起作用。

我已经在下面添加了两个脚本（抱歉，相当多的代码）。不知道有人能指出我做错了什么。

脚本1 - 简单形式：

<body>

<form>
    <input type="text" id="pcode" required pattern="[0-9]{4}"/><br>
    <button>Submit Reservation</button>
</form>

<script type="text/javascript">


     var pcode = document.getElementById("pcode");

        pcode.addEventListener("invalid", function() {


        if(pcode.validity.patternMismatch){
            pcode.setCustomValidity("4 digits required");
        } else {
            pcode.setCustomValidity("");
        }

    });

</script>

</body>

脚本2 - 更大的形式：

<!DOCTYPE HTML>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Form Validation</title>
<script src="modernizr.2.8.3.js"></script>
<link href="form-styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet'   type='text/css'>

<script type="text/javascript">

function validatePassword(){
var pass2 = document.getElementById("password2").value;
var pass1 = document.getElementById("password1").value;
if(pass1!= pass2)
    document.getElementById("password2").setCustomValidity("Passwords do not match!");
else
    document.getElementById("password2").setCustomValidity('');  

}

function validateMessage(){

var message = document.getElementById("message").value;

if(message.length <10){
    document.getElementById("message").setCustomValidity("Tell us more!");
}else{
    document.getElementById("message").setCustomValidity("");
}
}

var pcode = document.getElementById("pcode");

    pcode.addEventListener("invalid", function(e) {


        if(pcode.validity.patternMismatch){
            pcode.setCustomValidity("4 digits required");
        } else {
            pcode.setCustomValidity("");
        }

    });

</script>

</head>

<body>

<div id="form_wrapper">

<form id="the_form">

<ul>
<li id="page_title">Form</li>
<fieldset>
<legend>Contact Details</legend>
<li><label for="name">Name:</label><input type="text" name="name" id="name" required placeholder="John Smith"/></li>
<li><label for="address">Address:</label><input type="text" name="address" id="address" required placeholder="36 Main St"/></li>
<li><label for="address">City:</label><input type="text" name="city" id="city" required placeholder="Melbourne"/></li>
<li><label for="state">State:</label><input type="text" name="state" id="state" required placeholder="VIC"/></li>
<li><label for="postcode">Pcode:</label><input type="text" id="pcode" required pattern="[0-9]{4}"/></li>
<li><label for="country">Country:</label><input type="text" name="country" id="country" required placeholder="Australia"/></li>
<li><label for="email">Email:</label><input type="email" name="email" id="email" required /></li>
<li><label for="phone">Phone:</label><input type="tel" name="phone" id="phone" required/></li>
</fieldset>
</ul>

<fieldset>
<legend>Other Details</legend>
<p><label for="dob">DOB:</label><input type="date" name="dob" id="dob" /></p>
<p><span id="gender">Gender:</span><input type="radio" name="gender" value="male">Male         <input type="radio" name="gender" value="female">Female</p>
</fieldset>

<ul>   
<fieldset>
<legend>Account Details</legend>
<li><label for="user_name">User Name:</label><input type="text" name="user_name" id="user_name" required /></li>
<li><label for="password1">Password:</label><input type="text" name="password1" id="password1" required /></li>
<li><label for="password2">Confirm Password:</label><input type="text" name="password2" id="password2" onchange="validatePassword();" required /></li>
</fieldset>

<fieldset>
<legend>Tell us more about yourself</legend>
<li><label for="message">Message:</label><textarea name="message" id="message"   onchange="validateMessage();"/></textarea></li>
</fieldset>

<li><input name="submit" type="submit" value="Submit" /></li>


</ul>

</form>

</div> <!-- #form_wrapper -->

</body>

JavaScript HTML5约束验证

0 个答案: