[英]Can't get JavaScript SSN Form Validation to work
I am new to JS and trying to get it so when someone enters a SSN number in a field, it gives them an alert telling them to NOT put a SSN number in there. 我是JS的新手,并且当有人在某个字段中输入SSN号码时尝试得到它,它会给他们一个警告,告诉他们不要在那里放一个SSN号码。
HTML: HTML:
<form name="card" action="#">
<input type="text" name="field" class="name social" size="60" placeholder="First and Last Name">
<input type="text" name="field" class="phone social" size="60" placeholder="Phone Number">
<input type="text" name="field" class="email social" size="60" placeholder="Email(name@example.com)">
<select class="select">
<option value="My card has not yet arrived">My card has not yet arrived
<option value="Direct Deposit">Direct Deposit
<option value="Suggest a Card">Suggest a Card
<option value="Issues with CARD.com">Issues with CARD.com
<option value="Other">Other
</select>
<textarea name="field" class="text social " cols="60" rows="5" placeholder="How can we help you?"></textarea>
<input type"submit" name="submit" class="subBtn" value="Submit" onclick="warnCC(document.card.field)">Submit</input>
</form>
JS: JS:
<script>
function warnCC()
{
var ssn = document.getElementsByTagName("input");
// document.getElementsByClassName("social");
var pattern = /^[0-9]{3}\-?[0-9]{2}\-?[0-9]{4}$/;
if (ssn.value.match(pattern))
{
return true;
alert("Please Do Not Enter SSN Info Into This Form");
}
else
{
return false;
alert("yay!")
}
}
</script>
Any help on where I cam going wrong would be very helpful. 任何关于我出错的帮助都会非常有帮助。 I'd also prefer it was done on a "onfocusout" if anyone can give me advice on that. 如果有人能就此提出建议,我也更喜欢在“onfocusout”上完成。
getElementsByTagName
and getElementsByClassName
both return a list of elements. getElementsByTagName
和getElementsByClassName
都返回元素列表 。 That list doesn't have a value
property. 该列表没有value
属性。 Each of the items on the list has a value
property, but not the list. 每个列表上的项目具有value
属性,但不在名单。
You'll want to loop through the list of inputs and handle each of them as appropriate, eg: 您需要循环遍历输入列表并根据需要处理每个输入,例如:
var list = /*...get the list using either method you have in your code...*/;
var index, input;
for (index = 0; index < list.length; ++index) {
input = list[index];
// input.value will be the value of this particular input
}
Side note: querySelectorAll
has better support than getElementsByClassName
(IE8 has it, for instance, but not getElementsByClassName
), so if you want to get a list using a class, you're best off with: 旁注: querySelectorAll
比getElementsByClassName
有更好的支持(例如,IE8有它,但不是getElementsByClassName
),所以如果你想使用类获取列表,你最好用:
var list = document.querySelectorAll(".the-class-here");
您还应该在从函数返回之前执行alert()...如果您希望显示alert()对话框。
I tweaked your function. 我调整了你的功能。 You can see it inaction here: http://jsfiddle.net/tBqP2 你可以在这里看到它不作为: http : //jsfiddle.net/tBqP2
function warnCC() {
var formElements = document.getElementsByTagName("input");
for (var k in formElements) {
// document.getElementsByClassName("social");
var pattern = /^[0-9]{3}\-?[0-9]{2}\-?[0-9]{4}$/;
if (formElements[k].value.match(pattern)) {
alert("Please Do Not Enter SSN Info Into This Form");
return false;
}
}
return true;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.