gpt4 book ai didi

javascript - 表单验证不适用于电话号码/姓名

转载 作者:行者123 更新时间:2023-11-28 13:11:02 27 4
gpt4 key购买 nike

我一直在尝试制作一个验证电话号码和姓名的表单,但无论何时输入提交,无论字段是否填写,它都只会输入相同的消息。消息不断出现,我想不通

预计到达时间:http://jsfiddle.net/6W3uU/

<body>
<form id="contact">
<fieldset id="contactInformation">
<legend>Contact Information</legend>
<p id="error"></p>
<label id="name">Name:</label>
<br>
<input type="text">
<br>
<br>
<label id="phoneNumber">Phone Number:</label>
<br>
<input type="text">
<br>
<br>
<label id="eMail">E-Mail Address:</label>
<br>
<input type="text">
<br>
<br>
<label id="address">Address:</label>
<br>
<input type="text">
<br>
<br>
<label id="city">City:</label>
<br>
<input type="text">
<br>
<br>
<label id="postalCode">Postal Code:</label>
<br>
<input type="text">
<br>
<br>
<label id="province">Province</label>
<br>
<select id="province">
<option id="choose">Choose Your Province</option>
<option id="alberta">Alberta</option>
<option id="britishColumbia">British Columbia</option>
<option id="manitoba">Manitoba</option>
<option id="newBrunswick">New Brunswick</option>
<option id="newfoundland">Newfoundland and Labrador</option>
<option id="northwestTerritories">Northwest Territories</option>
<option id="noviaScotia">Nova Scotia</option>
<option id="nunavut">Nunavut</option>
<option id="ontario">Ontario</option>
<option id="pei">Prince Edward Island</option>
<option id="quebec">Quebec</option>
<option id="saskatchewan">Saskatchewan</option>
<option id="yukon">Yukon Territory</option>
<br>
<br>
<br>
<label id="shippingCheckbox">Is your shipping information the same as your contact information?
<input type="radio" id="sameInfo">
<label>
Yes it is
</label>
<br>
<br>
<input type="radio" id="notSameInfo">
<label>
No it is not
</label>
<br>
<br>
<input type="submit" id="submit" name="submit" value="Submit">
</form>
<br>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

这是脚本:

//script.js
var errorNotify = 'Sorry, we could not process your request because '
var errorField = [];

function formVal() {
var isValid = true;

for (var i = 0; i < errorField.length; i++ ) {
$(errorField[i]).removeClass('error');
}
errorField = [];

if(!nameCheck()) {
isValid = false;
}
if(!phoneCheck()) {
isValid = false;
}
if (isValid === false) {
$('#error').html(errorNotify).hide().slideDown('slow');
for (var i = 0; i < errorField.length; i++) {
$(errorField[i]).addClass('error');
}
errorNotify = 'Sorry, we could not process your request because ';
}

function nameCheck(){
if ($('#name').val() === '') {
errorNotify += ' you did not enter your name.';
errorField.push($('#name'));
return false;
} else {
return true;
}
}
function phoneCheck(){
var phoneCheck = $('#phoneNumber').val();
if (phoneCheck === '') {
errorNotify += ' you did not enter your phone number.';
errorField.push($('#phoneNumber'));
return false;
} else if (phoneCheck.length !== 10) {
errorNotify += 'please enter a 10 digit phone number';
errorField.push($('#phoneNumber'));
}
else if (isNaN(parseInt(phoneCheck))) {
errorNotify += 'you have entered a letter, please enter a number';
errorField.push($('#phoneNumber'));
}
else {
return true;
}
}
return isValid;
}
$(function () {
$('#contact').submit(function() {
return formVal();
});
});

最佳答案

你的 id 在 label 标签上,而不是输入字段,改变

<label id="name">Name:</label>
<br>
<input type="text">

<label for="name">Name:</label>
<br>
<input id="name" type="text">

等等

关于javascript - 表单验证不适用于电话号码/姓名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15533470/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com