javascript in xhtml problem

S

SamuelXiao

I am a newbie in javascript. I have encountered a problem in the
following code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blog Post</title>


<script type="text/javascript">
/*<![CDATA[ */
function validate_form(){
valid = true;
if(document.form1.author.value=""){
alert("Please fill in the 'Your name' box");
valid=false;
}

if(document.form1.content.value=""){
alert("Please fill in the 'Blog Content' box");
valid=false;
}

return valid;
}
/*]]>*/
</script>
</head>

<body>
<p>Create Blog</p>
<form name="form1" method="get" action="createPost.py"
onsubmit="return validate_form();">
<p><label for="author">Your Name:
<input type="text" size="30" name="author" id="author"/>
</label>
</p>
<p>Your Blog Content:<br />
<textarea rows="10" cols="45" name="content" id="content">Please
write your
blog here
</textarea>
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="Reset" type="reset" id="Reset" value="Reset" />
</p>
</form>
</body>
</html>

The javascript code is to validate a form. However, it is not work.
I think the problem is with xhtml? Or I miss something? I just want
to check whether the input or textarea is empty, if it is, the script
alert the user to input his information. And how can I set focus on
the input or textarea? I try document.form1.textarea.focus(); but it
is also not work. Any help would be appreciated. Thanks.
 
M

Martin Honnen

SamuelXiao said:
The javascript code is to validate a form. However, it is not work.
Click to expand...

Check the error console of your browser. Do you get a script error?
Which one exactly, for which statement?
I think the problem is with xhtml?
Click to expand...

Do you serve the XHTML as text/html or as application/xhtml+xml or as
application/xml?

Does using
document.forms.form1.elements.author.value
instead of
document.form1.author.value
improve things?
 
E

Elegie

SamuelXiao wrote :

Hi,
I am a newbie in javascript. I have encountered a problem in the
following code:
Click to expand...

if(document.form1.author.value=""){
if(document.form1.content.value=""){
Click to expand...

In javascript, the "=" is the assignment operator; try using the "=="
equality operator here.

Usually, we test for empty string using a regular expression, as we also
want to check whether the user enters white spaces.
And how can I set focus on
the input or textarea? I try document.form1.textarea.focus(); but it
is also not work.
Click to expand...

It should work if you correct the operator issue above. You could also
use color codes, and let the user decide which field he wants to correct
first (see below for an example).


---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Blog Post</title>
<style type="text/css">
input, .neutral {
border : 1px solid #000 ;
background-color : transparent ;
}
.invalid {
border : 1px solid red ;
background-color : #fcc ;
}
.valid {
border : 1px solid green ;
background-color : #cf9 ;
}
</style>
<script type="text/javascript">
function isEmpty(s) {
return /^\s*$/.test(s) ;
}

function highlight(obj, state) {
if(state==highlight.NEUTRAL) {
obj.className = "neutral" ;
} else if (state==highlight.VALID) {
obj.className = "valid" ;
} else if (state==highlight.INVALID) {
obj.className = "invalid" ;
}
}
highlight.NEUTRAL = {} ;
highlight.VALID = {} ;
highlight.INVALID = {} ;

function validate(frm) {
var messages = [] ;
var index = 0 ;
var ctrlAuthor = frm.elements["author"] ;
var ctrlContent = frm.elements["content"] ;

// check the author field
if (isEmpty(ctrlAuthor.value)) {
messages.push((++index)+" - Please fill in the author name.") ;
highlight(ctrlAuthor, highlight.INVALID) ;
} else {
highlight(ctrlAuthor, highlight.VALID) ;
}

// check the content field
if (isEmpty(ctrlContent.value)) {
messages.push((++index)+" - Please fill in the blog content.") ;
highlight(ctrlContent, highlight.INVALID) ;
} else {
highlight(ctrlContent, highlight.VALID) ;
}

// return the validation status
if(messages.length) {
alert(messages.join("\n")) ;
return false ;
}
return true ;
}
</script>
</head>

<body>
<p>Create Blog</p>
<form
method="get"
action="createPost.py"
onsubmit="return validate(this);">

<p>
<label for="author">
Your Name:
<input
type="text"
size="30"
name="author"
id="author"
onfocus="highlight(this, highlight.NEUTRAL);">
</label>
</p>

<p>
<label for="content">
Your Blog Content:
<br>
<textarea
rows="10"
cols="45"
name="content"
id="content"
onfocus="highlight(this, highlight.NEUTRAL);"></textarea>
</label>
</p>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
 
M

Matthias Reuter

function validate_form(){
valid = true;
if(document.form1.author.value=""){
alert("Please fill in the 'Your name' box");
valid=false;
}
if(document.form1.content.value=""){
alert("Please fill in the 'Blog Content' box");
valid=false;
}
return valid;
}
Click to expand...

You should rename your function to empty_form :)

(document.form1.author.value = "") is an assignment, not a comparison. So
you set the field's value to "". And since "" is converted to false, the
if-expression is not evaluated.

Try (document.form1.author.value === "") instead.
 
S

SamuelXiao

SamuelXiao wrote :

Hi,
I am a newbie in javascript.  I have encountered a problem in the
following code:
Click to expand...

if(document.form1.author.value=""){
if(document.form1.content.value=""){
Click to expand...

In javascript, the "=" is the assignment operator; try using the "=="
equality operator here.

Usually, we test for empty string using a regular expression, as we also
want to check whether the user enters white spaces.
 And how can I set focus on
the input or textarea?  I try document.form1.textarea.focus();  butit
is also not work.
Click to expand...

It should work if you correct the operator issue above. You could also
use color codes, and let the user decide which field he wants to correct
first (see below for an example).

---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>Blog Post</title>
   <style type="text/css">
   input, .neutral  {
     border : 1px solid #000 ;
     background-color : transparent ;
   }
   .invalid  {
     border : 1px solid red ;
     background-color : #fcc ;
   }
   .valid  {
     border : 1px solid green ;
     background-color : #cf9 ;
   }
   </style>
   <script type="text/javascript">
   function isEmpty(s) {
     return /^\s*$/.test(s) ;
   }

   function highlight(obj, state) {
     if(state==highlight.NEUTRAL) {
       obj.className = "neutral" ;
     } else if (state==highlight.VALID) {
       obj.className = "valid" ;
     } else if (state==highlight.INVALID) {
       obj.className = "invalid" ;
     }
   }
   highlight.NEUTRAL = {} ;
   highlight.VALID = {} ;
   highlight.INVALID = {} ;

   function validate(frm) {
     var messages = [] ;
     var index = 0 ;
     var ctrlAuthor = frm.elements["author"] ;
     var ctrlContent = frm.elements["content"] ;

     // check the author field
     if (isEmpty(ctrlAuthor.value)) {
       messages.push((++index)+" - Please fill in the author name..") ;
       highlight(ctrlAuthor, highlight.INVALID) ;
     } else {
       highlight(ctrlAuthor, highlight.VALID) ;
     }

     // check the content field
     if (isEmpty(ctrlContent.value)) {
       messages.push((++index)+" - Please fill in the blog content.") ;
       highlight(ctrlContent, highlight.INVALID) ;
     } else {
       highlight(ctrlContent, highlight.VALID) ;
     }

     // return the validation status
     if(messages.length) {
       alert(messages.join("\n")) ;
       return false ;
     }
     return true ;
   }
   </script>
</head>

<body>
   <p>Create Blog</p>
   <form
     method="get"
     action="createPost.py"
     onsubmit="return validate(this);">

   <p>
     <label for="author">
       Your Name:
       <input
         type="text"
         size="30"
         name="author"
         id="author"
         onfocus="highlight(this, highlight.NEUTRAL);">
        </label>
   </p>

   <p>
     <label for="content">
       Your Blog Content:
       <br>
       <textarea
         rows="10"
         cols="45"
         name="content"
         id="content"
         onfocus="highlight(this, highlight.NEUTRAL);"></textarea>
     </label>
   </p>
   <p>
     <input type="submit" value="Submit">
     <input type="reset" value="Reset">
   </p>
</form>
</body>
</html>
Click to expand...

Thanks, it works now.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Check forms With JavaScript 1
In javascript, XML File Create, File Save 2
How can I arrange a series of radio buttons? 2
XHTML - how extend/create ELEMENT body in my DTD? 0
Problem with javascript function call 7
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
Very Basic CC Validation Javascript 0
Why is this WordPress comments form not submitting? 1

Members online

No members online now.
Total: 36 (members: 1, guests: 35)
Robots: 250

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top