Javascript Validation form not working in Chrome?

[jn2030]

Hi,
What i am trying to do is use forms to repeat what I type in the text box as a string when i click.
I have a form with a text box and a submit button, currently when i type in the text box it will give an error if i have no text in the text box it does this correctly. The else statement of my code will show a welcome message followed by var x which gets the value from the text box. so the user types in their name and it returns the value.

The problem i have is that when i open it with Chrome and enter a value the message shows up for a split second and then goes away and the text box is left empty. As with the error message which displays that they haven't typed anything which remains. The code works in dreamweaver but when I open it doesn't work quite right. Here is my code:

function validateForm()
{
var x=document.forms["myForm"]["fname"].valu…
if (x==null || x=="")
{
document.getElementById('bla').inner… enter your name";
return false;
}
else
{
document.getElementById("bla").inner… " +x;
}
}

HTML:
<form name="myForm" onsubmit="return validateForm()">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<p id="bla"></p>

also idk if its worth to note the address bar changes whenever i enter a value, but the return value isnt displayed.

/index.html?fname=John

What am i doing wrong and is there an easier way to do this?

[Philip M]

You must post your proper code and not

document.getElementById('bla').inner… enter your name";

But you should be aware that form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe. Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

A form field can never be null. Only "" (blank).

document.getElementById("bla").inner… " +x;
should be
document.getElementById("bla").innerHTML += x; or document.getElementById("bla").innerHTML = x;

Don't give your fields silly names such as "bla".

Form names are obsolete. You should rather assign an id.

As Old Pedant said in this forum recently, "It may or may not come as a surprise to you, but NightmarishStalker (the much more descriptive name for DreamWeaver) produces about the worst and most out of date JavaScript code possible. Nobody that I know of in this forum is really willing to tackle DrunkWhomper code. We all prefer to just toss it out and use *GOOD* code."


A child of five would understand this. Send someone to fetch a child of five.
Groucho Marx

[jn2030]

Hi, sorry not sure why it wasn't showing the full code.

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
document.getElementById('bla').innerHTML="Please enter your name";
return false;
}
else
{
document.getElementById("bla").innerHTML="Welcome " +x;
}
}

The first part of the code to show "please enter your name" whenever the person doesn't enter anything works fine it's just the last part which like I said when I enter a name It should display "Welcome (persons name that they entered) as x " It does this fine in Dreamweaver but when I open it in Chrome It shows up for a split second after i submit and then disapears??

[WolfShade]

That's because the form is submitting (to itself), thusly refreshing the page. Prevent the form from submitting by adding another "return false;" to the else portion.

[Philip M]

Here you are:-

<form id = "myform">
Enter your name:- <input type = "text" name = "fname" id = "fname" onblur = "validateForm()"><span id = "uname"></span>
<br>

</form>
<script type = "text/javascript">

function validateForm() {
document.getElementById('uname').innerHTML="";  // reset the field
var x = document.getElementById("fname").value;
x = x.replace(/^\s+|\s+$/g,"");  // strip leading and trailing spaces
x = x.replace(/[^a-z\s\-\']/gi,"")  // strip inpappropriate characters
x = x.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
document.getElementById("fname").value = x;  // write it back to the field
if (x.length < 2) {
document.getElementById('uname').innerHTML= " Please enter your name!";
document.getElementById('fname').focus();
return false;
}
else {
document.getElementById("uname").innerHTML= " Welcome " +x;
}


}

</script>

A submit button does what it says - submits a form to a server-side script specified in the form action. If no action is specified the form submits to itself, which in effect reloads the page. Adding another return false will stop the form from submitting - ever!!

[Old Pedant]

Another way to do it:

Don't use onsubmit= in the </form>.

And don't use a submit button.

Instead, just use

<input type="button" value="Submit" onclick="validateForm()" />

Then it doesn't matter what you return from validateForm, the form won't get submitted.

[felgall]

Originally Posted by Old Pedant

the form won't get submitted.

and if JavaScript is not available then the form will do nothing at all.

[Old Pedant]

Originally Posted by felgall

and if JavaScript is not available then the form will do nothing at all.

Yep, but I don't think he really wants to do anything at all.

After all, the form as it is now is just submitting back to the same HTML page, which is clearly pointless if JS isn't enabled.

[felgall]

Originally Posted by Old Pedant

Yep, but I don't think he really wants to do anything at all.

If the form is supposed to do nothing if JavaScript is not available then it would probably be better to create the entire form from JavaScript so that those without JavaScript don't see a broken form.

The other alternative is that the OP intends to redirect to a different page from the form once they get the server side version built - in which case they are working backwards as the server side version ought to be built first - but maybe the OP hasn't learnt the other language yet and so is leaving it until they do.