[英]client side form validation
I'm adding a new component in the Joomla front end. 我在Joomla前端中添加了一个新组件。 There, a form is given and I use JavaScript for form validation instead of Joomla Behaviour Validation because i need to print the error message in a span.
在那里,给出了一个表单,我使用JavaScript而不是Joomla Behavior Validation来进行表单验证,因为我需要在跨度中打印错误消息。
My form is: 我的表格是:
<form action="" method="post" name="downloadtender" id="downloadtender" >
<br><br>
<fieldset>
Name:<br>
<input name='uname' type='text' id='uname' onblur='valid(this)' /><span id='inv' style="color: red;font-size: 12px;">*</span>
<br>
Designation:<br>
<input name='desig' type='text' id='desig' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span>
<br>
Company:<br>
<input name='comp' type='text' id='comp' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span>
<br>
Mobile Number:<br>
<input name='phone' type='text' id='phone' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span>
<br>
Email id:<br>
<input name='email' type='text' id='email' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">* </span>
<br><br>
<input type="submit" name="submit1" value="Register" />
</fieldset>
<?php echo JHTML::_( 'form.token' ); ?>
</form>
How can I prevent submitting the form before clearing all the error messages? 在清除所有错误消息之前,如何防止提交表单?
EDIT 编辑
<script type="text/javascript">
function valid(elem){
var input=[document.getElementById('uname'),document.getElementById('desig'),document.getElementById('comp'),document.getElementById('phone'),document.getElementById('email')];
for(var i=0;i<input.length;i++){
if(input[i].value==''&& elem.id==input[i].id){
elem.focus();
switch(input[i].id){
case 'uname':
document.getElementById('uname-inv').innerHTML="*Field Required*";
break;
case 'desig':
document.getElementById('desig-inv').innerHTML="*Field Required*";
break;
case 'comp':
document.getElementById('comp-inv').innerHTML="*Field Required*";
break;
case 'phone':
document.getElementById('phone-inv').innerHTML="*Field Required*";
break;
case 'email':
document.getElementById('email-inv').innerHTML="*Field Required*";
break;
}
}
else{
switch(input[i].id){
case 'uname':
document.getElementById('uname-inv').innerHTML="";
break;
case 'desig':
document.getElementById('desig-inv').innerHTML="";
break;
case 'comp':
document.getElementById('comp-inv').innerHTML="";
break;
case 'phone':
document.getElementById('phone-inv').innerHTML="";
break;
case 'email':
document.getElementById('email-inv').innerHTML="";
break;
}
}
}
if(document.getElementById('email').value!=''){
var t=document.getElementById('email');
var x=t.value.indexOf('@');
var y=t.value.lastIndexOf('.');
if((x<1)||(y<x+2)||(y+2>t.length)){
$er=1;
document.getElementById('email-inv').innerHTML="*Please provide correct email address*";
}
else{
document.getElementById('email-inv').innerHTML="";
}
}
}
</script>
You have multiple elements with id="inv"
where ID's must be unique. 您具有
id="inv"
多个元素,其中ID必须是唯一的。
Rename your spans as follows: 重命名您的跨度,如下所示:
<span id="uname-inv" style="color: red;font-size: 12px;">*</span>
And reference with your JS: 并引用您的JS:
case 'uname':
document.getElementById('uname-inv').innerHTML="*Field Required*";
break;
Please note, this is far from an optimised or ideal way of handling form validation. 请注意,这与处理表单验证的优化或理想方式相去甚远。 Look at using jQuery Validation .
看一下使用jQuery Validation 。
EDIT: 编辑:
To prevent form submission on validation failure amend your form
element as follows: 为了防止在验证失败时提交
form
按如下所示修改form
元素:
<form action="" method="post" name="downloadtender" id="downloadtender" onsubmit="return validate()">
Then create a function validate()
that will validate all your fields and return true
if validation is passed or false
if validation fails. 然后创建一个函数
validate()
,它将验证您的所有字段,如果通过验证,则返回true
如果验证失败,则返回false
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.