[英]Validate text-field and checkboxes in using JavaScript
I'm trying to have a full "validate-form" function. 我正在尝试使用完整的“验证表单”功能。 I'm only missing two things:
我只缺少两件事:
Here's what I got so far ... The checkbox validation seems to get bypassed and I'm not sure if it's because I'm not calling the function in the "onSubmit" .... this is why I want to have "one" full code, 这是到目前为止我得到的...复选框验证似乎被绕过了,我不确定是否是因为我没有在“ onSubmit”中调用该函数...。这就是为什么我要拥有“一个”完整的代码,
As for the Name Validation , I'm not sure how to place this code within the validateform3 function or at least relate it to the form , same goes for the checkbox validation. 至于名称验证,我不确定如何将这段代码放在validateform3函数内,或者至少将其与表单相关联,复选框验证也是如此。
NAME VALIDATION JS 名称验证JS
function englishonly(inputtxt)
{
var letters = /^[A-Za-z]+$/;
if(inputtxt.value.match(letters))
{
return true;
}
else
{
alert('Please type your name in english');
return false;
}
}
JAVASCRIPT JAVASCRIPT
<script type="text/javascript">
function validateForm3() {
if (studentid.value == "")
{
studentid.style.borderColor = '#ff0000';
alert("Please enter your Student ID");
studentid.focus();
return false;
}
var x=document.forms["form3"]["studentid"].value;
if (! /^[0-9]{11}$/.test(x)) {
studentid.style.borderColor = '#ff0000';
studentid.style.backgroundColor = "#fdf0af";
alert("The Student ID you entered is incorrect.");
return false;
}
if (Email.value == "")
{
Email.style.borderColor = '#ff0000';
alert("Please enter your e-mail");
Email.focus();
return false;
}
var x=document.forms["form3"]["Email"].value;
if (x.indexOf("@")=== -1)
{
Email.style.borderColor = '#ff0000';
Email.style.backgroundColor = "#fdf0af";
alert("Please enter a valid email");
return false;
}
if (Name.value == "")
{
Name.style.borderColor = '#ff0000';
alert("Please enter your Name in English");
Name.focus();
return false;
}
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#Regestir").click(function () {
var numberOfChecked = $('input:checkbox:checked').length;
// $.isNumeric( $("#studentid").val() )
if( $("#studentid").val()!="" && $("#studentid").val()!="" && $("#Email").val()!="" && $("#Name").val()!="")
{
if (numberOfChecked == 0 || numberOfChecked>7)
{
alert("Only 7 courses are allowed.");
$("form").submit(function(e){
e.preventDefault();
});
}
else
$("form").unbind('submit').submit();
//$("#form3").submit();
}
else
{
alert ("You should enter all form values");
$("form").submit(function(e){
e.preventDefault();
});
}
});
});
</script>
HTML 的HTML
<form action="connect.php" method="get" id="form3"
name="form3" onsubmit="return validateForm3()">
To get the total number of checked checkboxes, replace your 要获取已选中复选框的总数,请替换您的
var numberOfChecked = $('input:checkbox:checked').length;
with 与
var numberOfChecked = $('input:checkbox[name=type]:checked').length;
As for your question on your name validation englishonly
function, you can just call it directly in your validateform3
function. 关于您的名称验证
englishonly
函数的问题,您可以直接在validateform3
函数中调用它。 If the codes for that function come from a different file, you will have to include that js file. 如果该函数的代码来自其他文件,则必须包含该js文件。 Then your codes can look something like this:
然后您的代码可以如下所示:
function validateform3(){
// ....
var valid_english_name = englishonly($('#name')); // or whatever your 'name' input ID is
}
As a sidenote, if you want to cancel the form submission due to some validation errors, you can use just e.preventDefault();
附带说明,如果由于某些验证错误而要取消表单提交,则可以仅使用
e.preventDefault();
or return false;
或
return false;
without the re-binding the submit
event handler. 无需重新绑定
submit
事件处理程序。
In addition, codes like studentid.value
and Email.value
will probably not work. 此外,像码
studentid.value
和Email.value
将可能无法正常工作。 Since you are using jquery, you can replace them with jquery selectors . 由于您正在使用jquery,因此可以将它们替换为jquery 选择器 。
Hope this helps. 希望这可以帮助。
Here's a FIDDLE for you to think about. 这里有一个FIDDLE让你思考的问题。
JS JS
var inputname, length1, length2, checkboxcount = 0;
$('.clickme').on('click', function () {
inputname = $('.myname').val();
length1 = inputname.length;
length2 = inputname.replace(/[^a-zA-Z\s]/gi, '').length;
if (length1 != length2)
{
$('#errorspan').append('Only letters are allowed in a name');
validname = 0;
}
else
{
validname = 1;
}
$('.checkme').each(function(){
if( $(this).is(':checked') )
{
checkboxcount = checkboxcount + 1;
}
});
if(checkboxcount < 1)
{
$('#errorspan').append('At least one checkbox must be checked');
validbox = 0;
}
else if(checkboxcount > 6)
{
$('#errorspan').append('No more than 6 checkboxes can be checked');
validbox = 0;
}
else{
validbox = 1;
}
if (validname === 1 && validbox == 1)
{
alert("Everything Valid");
}
else
{
alert("Not Valid! You have work to do!");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.