Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HTML form validation problem!

Status
Not open for further replies.
li70

li70

Technical User
Mar 24, 2007
10
GB

Hi. 2 u
Could u tell me plz what’s wrong with my following code. I’d like to validate my HTML fields field by field. So, I can’t leave the first textbox unless it has been validated. My code allows me to submit empty fields. What’s wrong?

Any help is appreciated

<html>
<head>
<script language="JavaScript">
function isEmpty(fieldname){

if (fieldname.value== null || fieldname.value == ""){
alert("fill in the box please!")
fieldname.focus();

return false;
} else {

return true;
}
}
</script>
</head>
<body>
<form name="form1" method="GET" action="????????" >
<p> User Name: <input type="text" name="txt1" onBlur="isEmpty(this)" />
<p>Password: <input type="password" name="txt2" onBlur="isEmpty(this)" />
<p>Email: <input type="text" name="txt3" onBlur="isEmpty(this)" />
<br />
<input type="submit" VALUE="SUBMIT" />
</form>
</body>
</html>

 
Sort by date Sort by votes
You must check the fields in the onsubmit event handler. Returning false there will prevent the form from being submitted. The onblur event handler does not care whether it returns true or false, there is no consequence to that.

So
Code: 
...
<form name="form1" method="GET" action="????????" onsubmit="isValid(this)">
...
<script>
function isValid(vF) {
  var result = true;

    if ( vF.txt1.value == "" ) {
      result = false;
    }
    if ( vF.txt2.value == "" ) {
      result = false;
    if ( vF.txt3.value == "" ) {
      result = false;

  return result;
}
</script>
 
Upvote 0 Downvote
thanx rac2 4 helping me.
Actually my html doc is generated dynamically from an XML doc by XSLT. This means I can’t bind my document to any specific fields. In addition, I need to validate my HTML fields field by field it is not just for Empty fields but for many other data type validation. So, I need to pass parameters and make validation occurs field by field. I find validation onSubmit doesn’t work in this case (dynamic generation html).
Any suggestion, any solution?

Please help

Cheers
 
Upvote 0 Downvote
>I find validation onSubmit doesn’t work in this case (dynamic generation html).
But I think this observation is incorrect. There is no reason for validation onsubmit failed to perform if the page is dynamically generated.

In any case, if you want to limit yourself to such form of structure, you can do this, amid very clumsy. And I suppose you have more freedom to modify the script section rather than body section.

[1] Add window onload function disabling the submit button
[tt]
window.onload=function() {
var celem=document.getElementsByTagName("input");
for (var i=0;i<celem.length;i++) {
if (celem.type=="submit") {
celem.disabled=true;
break;
}
}
}
[/tt]
[2] Modify the IsEmpty function's contents.
[tt]
function isEmpty(fieldname){ //fieldname is not just a name, it is the field object

if (fieldname.value == null || fieldname.value == ""){
alert("fill in the box please!")
fieldname.focus();
} else {
var bOK=true;
var celem=fieldname.form.getElementsByTagName("input"); //assume only input tags as form fields
for (var i=0;i<celem.length;i++) {
if ((celem.type=="text") && (celem.value.length==0)) {
celem.focus();
bOK=false;
break;
}
}
for (var i=0;i<celem.length;i++) {
if (celem.type=="submit") {
celem.disabled=!bOK;
break;
}
}
}
}
[/tt]
 
Upvote 0 Downvote
thanx alot tsuji.
it works perfect, but when i embaded this functions in the xslt file which translates xml into html i got an error preventing my xslt file from validation. for example this line

for (var i=0;i<celem.length;i++) {

returns an error message says:


A name contained an invalid character.
Source: 'for (var i=0;i<celem.length;i++) {'
line:22, Pos:30 (;)


could u plz help in solving this problem.

cheers
 
Upvote 0 Downvote
When you script the xsl on the script section, make it as a cdata section. Then the functions etc... can be written as such, without the need of escaping.
[tt]
<script language="javascript">
[blue]<![CDATA[[/blue]
window.onload=function() {
var celem=document.getElementsByTagName("input");
for (var i=0;i<celem.length;i++) {
if (celem.type=="submit") {
celem.disabled=true;
break;
}
}
}
//etc etc the rest
[blue]]]>[/blue]
</script>
[/tt]
 
Upvote 0 Downvote
hi..all
adding <![DATA[
disabled the validation task in total.
so, what's the sloution??
cheers
 
Upvote 0 Downvote
>adding <![DATA[
>disabled the validation task in total.
>so, what's the sloution??
What do you mean? If you read careful what I was talking, I was talking about scripting the _xsl_ document. Were you doing that?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
617
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
689
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
641
malpa
malpa
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
567
Rayj0000
Rayj0000
amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
224
amrmnabil
amrmnabil

Part and Inventory Search

Sponsor

Back
Top