当我点击提交按钮时，它会直接进入php页面。 javascript根本没有加载。这非常令人困惑，因为我在控制台中没有收到任何错误，也没有使用外部错误检查器（例如JShint）验证javascript。 javascript在我的编码中有一点工作，所以我不知道为什么它停止工作。
JAVASCRIPT：
//jQuery
$(document).ready(function() {
// listen for a click event on any radio element
$('input[type="radio"]').click(function() {
// get the id of the clicked element
var id = $(this).attr('id');
// fade out any existing image elements
$('img').fadeOut(800, function() {
// fade in the image element with the id we're after, with a half second delay (500 milliseconds)
setTimeout(function() {
$('#' + id + 'i').fadeIn(800);
}, 500);
});
});
});
function checkInput() {
var firstName = document.getElementById("fn");
var lastName = document.getElementById("ln");
var email = document.getElementById("email");
var emailR = document.getElementById("emailR");
var postal = document.getElementById("pc");
var city = document.getElementById("city");
var sA = document.getElementById("sA");
var qN = document.getElementById("qty");
var provy = document.getElementById("prov");
var foc = false;
var error = "";
var letters = /^[a-zA-Z]+$/;
var numbers = /^\d+$/;
var letNm = /^(?=.*[a-zA-Z])(?=.*[0-9])/;
//First-Name Validation
if (firstName.value == "" || firstName.value.length > 15 || firstName.value.length < 2 || !firstName.value.match(letters)) {
error += "\n Please enter a valid first name.";
if (foc == false) {
document.getElementById("fn").focus();
foc = true;
}
}
//Last-Name Validation
if (lastName.value == "" || lastName.value.length > 15 || lastName.value.length < 2 || !lastName.value.match(letters)) {
error += "\n Please enter a valid last name";
if (foc == false) {
document.getElementById("ln").focus();
foc = true;
}
}
//street Address
if (sA.value == "" || sA.value.length < 6 || sA.value.length > 30 || !sA.value.match(letNm)) {
error += "\n Please enter a valid street address (must contain letters and numbers, \n and be more than 6 less than 30 chars) ";
if (foc == false) {
document.getElementById("sA").focus();
foc = true;
}
}
//City Validation
if (city.value == "" || city.value.length > 20 || city.value.length < 2 || !city.value.match(letters)) {
error += "\n Please enter a valid city (more than 2 characters, less than 20, all letters)";
if (foc == false) {
document.getElementById("city").focus();
foc = true;
}
}
//Province Validation
var select = provy.options[provy.selectedIndex].value;
if (select == "s") {
error += "\n Please choose a province";
if (foc == false) {
document.getElementsByName("prov").focus();
foc = true;
}
}
//Email Validation
var ei = email.value.lastIndexOf('@');
var dot = email.value.lastIndexOf('.');
if (email.value == "" || email.value.length < 7 || email.value.length > 50 || ei == -1 || dot == -1 || dot < ei + 2) {
error += "\n Please enter a valid email address \n (must have an \"@\" symbol followed by a \".\")";
if (foc == false) {
document.getElementById("email").focus();
foc = true;
}
} else if (emailR.value != email.value) {
error += "\n Your email addresses did not match";
if (foc == false) {
document.getElementById("emailR").focus();
foc = true;
}
}
//Postal Code Validation
var pi = postal.value.lastIndexOf(" ");
var code = /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/;
if (postal.value == "" || postal.value.length != 7 || !postal.value.match(code) || pi != 3) {
error += "\n Please enter a valid Canadian postal code. E.g. \"N3H 1M1\" ";
if (foc == false) {
document.getElementById("pc").focus();
foc = true;
}
}
//Album selection Validation
var jay = document.getElementsById("jayz");
if (!isOneChecked(jay)) {
error += "\n Please choose an album to purchase";
if (foc == false) {
document.getElementsByName("jayz").focus();
foc = true;
}
}
//quantity validation
if (qN.value == "" || qN.value > 99 || qN.value < 1 || !qN.value.match(numbers)) {
error += "\n Please enter a quantity between 1-99";
if (foc == false) {
document.getElementByName("qntty").focus();
foc = true;
}
}
//error validation:error2 boolean returns either true or false
var error2 = false;
if (foc == false) {
alert("Thank you for signing up!");
error2 = true;
} else {
alert(error);
error2 = false;
}
return error2;
}
//function that trims and converts string to properCase
function properCaseTrim(string) {
var str = string.length;
for (var i = 0; i < str; i++) {
var letter = string.charAt(i);
if (letter == " ") {
string = string.replace(/^\s\s*/, ''); // Remove Preceding white space
string = string.replace(/\s\s*$/, ''); // Remove Trailing white space
}
string = string.charAt(0).toUpperCase() + string.slice(1);
}
return string;
}
function isOneChecked() {
// All <input> tags...
var chx = document.getElementsByTagName('input');
for (var i = 0; i < chx.length; i++) {
// Return true from the function on first match of a checked item
if (chx[i].type == 'radio' && chx[i].checked) {
return true;
}
}
// End of the loop, return false
return false;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<link rel="icon" type="image/x-icon" href="images/favi.ico" />
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<script type="text/javascript" src="javascript/jquery-1.12.1.js"></script>
<script type ="text/javascript" src="javascript/function.js"></script>
</head>
<body>
<header>
<h1>Jay-Z Albums</h1>
</header>
<fieldset id = "field1">
<legend>Shipping Info</legend>
<p id ="p">All Fields Are Mandatory </p>
<form method = "post" name= "user creation form" onsubmit="return checkInput();" action = "php/validate.php">
First name<br>
<input type="text" name="firstName" id ="fn" onblur="this.value = properCaseTrim(this.value)" value= "" autofocus><br>
Last name<br>
<input type="text" name="lastName" id = "ln" onblur="this.value = properCaseTrim(this.value)" value= ""><br>
Street Address<br>
<input type="text" name="streetAddress" id = "sA" placeholder="123 Main St." onblur="this.value = properCaseTrim(this.value)" value= "" ><br>
<label>
City <br>
<input type="text" name="city" id="city" onblur="this.value = properCaseTrim(this.value)" value= "">
</label>
<br>
Province <br>
<select name ="prov" id ="prov">
<option value = "s">-select-</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scoti">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</select>
<br>
<label>
Postal Code <br>
<input type="text" name="pc" id="pc" placeholder="A1A 1A1" onblur="this.value = this.value.toUpperCase(); this.value = properCaseTrim(this.value)" value= ""> <br>
</label>
<label>
Email Address<br>
<input type="text" name="email" id="email" value= ""> <br>
</label>
<label>
Repeat Email Address <br>
<input type="text" name="emailR" id="emailR" value= "" > <br>
</label>
<br>
</fieldset>
<fieldset id = "field3">
<legend>Order </legend>
<p> One Album Per Order</p>
<p> Prices shown are without tax </p>
<input type = "radio" name ="jayz" value="rDbt" id= "rD">[1996]Reasonable Doubt-$25 <br>
<input type = "radio" name ="jayz" value="bPrint" id= "bP1">[2001]The Blueprint-$10<br>
<input type = "radio" name ="jayz" value="bPrint2" id = "bP2">[2002]The Blueprint 2-$15<br>
<input type = "radio" name ="jayz" value="kCome" id ="kC">[2006]Kingdom Come-$10<br>
<input type = "radio" name ="jayz" value="bPrint3" id ="bP3">[2009]The Blueprint 3-$25<br>
<input type = "radio" name ="jayz" value="mCarta" id ="mC">[2013]Magna Carta Holy Grail-$30<br>
<div id="q">
# of Albums:
<input type="text" name="quant" id="qty">
</div>
</fieldset>
<aside>
<div id = "divvy">
<img class = "hidden" src="images/rDoubt.jpg" alt="Reasonable Doubt" height="400px" width="400px" id= "rDi">
<img class = "hidden" src="images/bPrint.jpg" alt="the Blueprint" height="400px" width="400px" id= "bP1i">
<img class = "hidden" src="images/bPrint2.jpg" alt="the Blueprint 2" height="400px" width="400px" id = "bP2i">
<img class = "hidden" src="images/kCome.jpg" alt="Kingdom Come" height="400px" width="400px" id ="kCi">
<img class = "hidden" src="images/bPrint3.jpg" alt="the Blueprint 3" height="400px" width="400px" id ="bP3i">
<img class = "hidden" src="images/mCarta.jpg" alt="Magna Carta" height="400px" width="400px" id ="mCi">
</div>
</aside>
<input id="button" type="submit" value="Submit Order" >
</form>
</body>
</html>
答案 0 :(得分：0)
颠倒这些脚本标签的顺序:( jquery应该是第一个）
<script type ="text/javascript" src="javascript/function.js"></script>
<script type="text/javascript" src="javascript/jquery-1.12.1.js"></script>
我怀疑由于这个问题，你在function.js中的jquery代码无效。
答案 1 :(得分：0)
这是<input type="submit"/>的默认行为，您必须覆盖它：
$('form').on('submit',function(e){
e.prevetDefault();
//do your JS processing here, call a function and finally make an AJAX request
checkInput();
});
应该这样做。
另外，我不认为带有空格的'name'属性是有效的。最好保持独特/或作为关键或标识符处理。