jquery를 사용하여 양식의 유효성을 검사하려고 시도했지만 몇 가지 문제가 발생했습니다. 링크는 아래에 있습니다.
<!DOCTYPE html>
<html lang="en-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mystyle3.css">
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#inputform" ).validate({
rules: {
fname: {
required: true,
minlength: 2,
maxlength: 20,
alphanumeric: true,
},
lname: {
required: true,
minlength: 2,
maxlength: 20,
alphanumeric: true,
},
street: {
required: true,
minlength: 4,
street: true,
},
city: {
required: true,
minlength: 4,
},
birthdate: {
required: true,
date: true,
},
zip: {
required: true,
minlength: 4,
maxlength: 5,
digits: true,
zip: true
},
tel: {
required: true,
minlength: 10,
tele: true,
},
birthdate:{
required: true,
check_date_of_birth: true
},
email: {
required: true,
email: true
},
},
messages: {
}
});
$.validator.addMethod("alphanumeric",
function(value, element) {
return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
},
"Sorry, no special characters allowed");
});
$.validator.addMethod('zip', function (value) {
return /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/.test(value);
}, 'Please enter a valid US zip code.');
$.validator.addMethod('street', function (value) {
return /^[a-zA-Z0-9-\/] ?([a-zA-Z0-9-\/]|[a-zA-Z0-9-\/] )*[a-zA-Z0-9-\/]$/.test(value);
}, 'Please enter a valid street address.');
$.validator.addMethod('city', function (value) {
return /^[a-zA-z] ?([a-zA-z]|[a-zA-z] )*[a-zA-z]$/.test(value);
}, 'Please enter a valid City.');
$.validator.addMethod('tele', function (value) {
return /^(([2-9]{1}[0-9]{2}) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$/.test(value);
}, 'Please enter a valid Telephone number.');
</script>
<script type="text/javascript">
$(document).ready(function(){
var d = new Date();
var curr_year = d.getFullYear();
$("#txtDate").datepicker({
yearRange: '1900:'+ curr_year,
changeMonth:true,
changeYear:true, maxDate: '-1d'
});
});
</script>
<title>Assignment 3 Input form</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="http://www.jkozla.com/default.htm"><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Assignments</span></a>
<ul>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment1.htm><span>Assignment 1</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment2.htm><span>Assignment 2</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment3.html><span>Assignment 3</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment4.htm><span>Assignment 4</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment5.htm><span>Assignment 5</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment6.htm><span>Assignment 6</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment7.htm><span>Assignment 7</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment8.htm><span>Assignment 8</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment9.htm><span>Assignment 9</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment10.htm><span>Assignment 10</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment11.htm><span>Assignment 11</span></a>
</li>
</ul>
</li>
<li class='active has-sub'><a href="#"><span>Classes</span></a>
<ul>
<li class='has-sub'><a href="https://cop4813eaglin.pbworks.com/w/page/34415594/FrontPage"><span>COP4813</span></a>
</li>
<li class='has-sub'><a href="https://cas.fsu.edu/cas/login?service=https%3A%2F%2Fcampus.fsu.edu%2Fwebapps%2Fbb-auth-provider-cas-bb_bb60%2Fexecute%2FcasLogin%3Fcmd%3Dlogin%26authProviderId%3D_105_1%26redirectUrl%3Dhttps%253A%252F%252Fcampus.fsu.edu%252Fwebapps%252Fportal%252Fframeset.jsp%26sessionIdForLogout%3DEB7D8A9EDEE7CA79B83CA34E8C9FA206"><span>MAD2104</span></a>
</li>
</ul>
</li>
<li class='active has-sub'><a href="#"><span>Project</span></a>
<li class='last'><a href="mailto:[email protected]"><span>Contact</span></a>
</li>
</ul>
</div>
<h1>COP 4813 Form Validation</h1>
<form class="form-horizontal" id="inputform" method="POST" onsubmit="submitHandler" action="mailto:[email protected]" enctype="text/plain">
<?php
require_once('recaptchalib.php');
$publickey = "6LcFzgwTAAAAAGl09TEBMh9akRJDZwuBDZEl0qHC"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
<p>
<label for="fname">First Name: </label>
<input name="fname" class="fname" id="fname" type="text" name="fname" size="15" /><br><br>
<label for="lname">Last Name: </label>
<input name="lname" class="required" id="lname" type="text" size="15" /><br><br>
<label for="street">Street Address: </label>
<input name="street" class="required" id="street" type="text" pattern="[a-zA-Z0-9\s]+" size="20" /><br><br>
<label for="city">City: </label>
<input name="city" class="required" id="city" type="text" pattern="[a-zA-Z0-9\s]+" size="15" /><br><br>
<label for="state">State: </label>
<select name="state" id="state" size="1"><br><br>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">Dist of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select><br><br>
<label for="zip">Zipcode: </label>
<input name="zip" class="required" id="zip" type="text" size="8" /><br><br>
<label for="tel">Phone Number: </label>
<input name="tel" class="required" id="tel" type="tel" data-mask="000 000-0000" placeholder="xxx xxx-xxxx" size="10" /><br><br>
<label for="birthdate">DOB: </label>
<input name="birthdate" type="text" class="required" id="txtDate" placeholder="mm/dd/yyyy" size="15" /><br><br>
<label for="email">Email: </label>
<input name="email" id="email" type="email" class="required" size="15" /><br><br>
Message:<br>
<textarea name="comment" required rows="4" cols="50"></textarea> <br><br>
<div class="g-recaptcha" data-sitekey="6LcFzgwTAAAAAGl09TEBMh9akRJDZwuBDZEl0qHC"></div>
</p>
<p><input name="send" type="submit" value="Submit"/></p>
</form>
<div id="fixedfooter">Copyright © Jonathan Kozla. All rights reserved.</div>
</body>
</html>
이것은 이미 제출 된 숙제이지만 제가 배우기 위해서는 제가 어디에서 잘못되었는지 알아야합니다. 도와주세요
e.preventDefault(); 도움이 될 수 있습니다
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다