Ways to validate forms

[Cesark]

I want to validate a form with a function, to send the data to the server (and insert into the database) and then go to the next page. I want to do it with a hyperlink, and now I know four possibilities to validate a form. Which is the best and why?


1.
<form action="next_page.asp" onSubmit="return checkMail(this.form)" method="post">

<input type="submit" value="Submit">
</form>



2.
<form>

<a href="next_page.asp" onClick="return checkMail(this.form)">To send data</a>
</form>



3.
<script language="JavaScript">
<!--
function checkMail(form)
{
for (var = i; i < form.elements.length; i++ {
if (form.elements[i].value == "") {
alert("Fill out ALL fields.")
return
}
}
form.submit()
return
// -->
</script>
}


<form>
<a href="next_page.asp" onClick="return checkMail(this.form)">To send data</a>
</form>



4.
<form action="next_page.asp" method="post">
</form>

<a href="javascript:document.forms[0].submit()">To send data</a>

[pyro]

Number 1 is best, as it will continue to work for uses without JavaScript enabled. Also, you should do validation server-side as well as client-side, as any validation that is done client-side can be easily gotten around.

[Cesark]

Ok, then if the best way to validate a form is the first option, How can I achieve it with an hyperlink instead of a button? (to validate, to send data and to go to the next page)

[pyro]

While remaining non-JavaScript dependent? You don't...

[Charles]

Originally posted by pyro
While remaining non-JavaScript dependent? You don't... You give up too easily; there's always a way.

<script type="text/javascript">
<!--
document.write('<a href="#" id="submit">Submit</a>');
document.getElementById('submit').onclick = function () {if(document.myForm.onsubmit()) document.myForm.submit()}
// -->
<noscript><button type="submit">Submit</button></noscript>

[pyro]

Which will still break for certian users. NN 4.7, for instance - whether JavaScript is enabled or not. But perhaps that's just being picky...

[Charles]

Originally posted by pyro
Which will still break for certian users. NN 4.7, for instance - whether JavaScript is enabled or not. But perhaps that's just being picky... If one were to wish to take pitty on those poor souls, one could use the older DOM.

<script type="text/javascript">
<!--
document.write('<a href="#" id="submit">Submit</a>');
document.links[document.links.length-1].onclick = function () {if(document.myForm.onsubmit()) document.myForm.submit()}
// -->
<noscript><button type="submit">Submit</button></noscript>

[pyro]

Indeed. And perhaps it would also be best to use <input type="submit" value="Submit"> for those same "poor souls" ;)

[Cesark]

Interesting

Returning to my knowledge in JavaScript, I would like to know what does '<input type="submit">' and '<onSubmit=""> exactly does.

I can' t understand what is the difference between triggering a function with '<onSubmit=""> into the form tag and triggering with <a href="" onClick="">To send</a>.


It does not do just like 'onSubmit' this?

<form action="next_page.asp" onSubmit="return checkMail (this.form)" method="post">
</form>

<a href="java script:document.forms[0].submit()">To send data</a>


Please try to dedicate several lines in explanation, with a logical, simple and summarize way. I don’ t have any idea what is the magic of 'submit button' and 'onSubmit' action.

[Charles]

Originally posted by Cesark
Interesting

Returning to my knowledge in JavaScript, I would like to know what does '<input type="submit">' and '<onSubmit=""> exactly does.

I can' t understand what is the difference between triggering a function with '<onSubmit=""> into the form tag and triggering with <a href="" onClick="">To send</a>.


It does not do just like 'onSubmit' this?

<form action="next_page.asp" onSubmit="return checkMail (this.form)" method="post">
</form>

<a href="java script:document.forms[0].submit()">To send data</a>


Please try to dedicate several lines in explanation, with a logical, simple and summarize way. I don’ t have any idea what is the magic of 'submit button' and 'onSubmit' action. 1) The problem is that 13% of users do not use JavaScript and some of them cannot do so because of some disability. You must make sure that your page works when there is no JavaScript.

2) Using the javascript : pseudo URL scheme in the "href" attribute value of an A element is bad and it doesn't do what you think it will on more moddern browsers. Use the "onclick" handler instead. It it returns false then the value in the "href" attribute will be ignored.

3) The "onsubmit" handler of a FORM element is called just before the form is submitted though iif it returns false the submission is canceled.

[Charles]

Originally posted by pyro
Indeed. And perhaps it would also be best to use <input type="submit" value="Submit"> for those same "poor souls" ;) ]The BUTTON element was introduced into HTML back in 1997. People who knowingly use a browser that does't understand HTML get what they deserve. People who unknowingly do so need the gentle push of pages not working to upgrade.

[Cesark]

Ok Charles, thank you VM for your explanation.

I can seem obstinate but I think that I will make serve the second option because I don' t want to use an ugly button to submit my form. As you said in second point Use the "onclick" handler instead. It it returns false then the value in the "href" attribute will be ignored. I think that is the best solution for me. I will write it thus:

<form>

<a href="next_page.asp" onClick="return checkMail(formName)">To send data</a>
</form>

If you think that it is an unacceptable solution tell me something, if it is not thus it's enough ;)

Cesar

[Charles]

Originally posted by Cesark
Ok Charles, thank you VM for your explanation.

I can seem obstinate but I think that I will make serve the second option because I don' t want to use an ugly button to submit my form. As you said in second point Use the "onclick" handler instead. It it returns false then the value in the "href" attribute will be ignored. I think that is the best solution for me. I will write it thus:

<form>

<a href="next_page.asp" onClick="return checkMail(formName)">To send data</a>
</form>

If you think that it is an unacceptable solution tell me something, if it is not thus it's enough ;)

Cesar You misunderstand, my suggestion is to draw the link with JavaScript and to put the button in a NOSCRIPT element. That way the link will appear when, and only when, it will work and the button will appear only when it is needed.

[pyro]

Originally posted by Charles
]People who knowingly use a browser that does't understand HTML get what they deserve. People who unknowingly do so need the gentle push of pages not working to upgrade. Agreed.

[pixelmech]

Originally posted by Charles
1) The problem is that 13% of users do not use JavaScript and some of them cannot do so because of some disability. You must make sure that your page works when there is no JavaScript.

That's a nice figure, but it means nothing. 13% of WHAT users? Users on your logs? Less than .5% of users on our entrerprise-wide customer facing site have JS disabled. So your figure is not true for us. You can't make blanket statements like that. He needs to find out how many of his users disable JS before he begins crafting a solution IMO.

Secondly if you are going to toss out a number like that, how about a reference? I've never seen such a number.

Originally posted by Charles

2) Using the javascript : pseudo URL scheme in the "href" attribute value of an A element is bad and it doesn't do what you think it will on more moddern browsers. Use the "onclick" handler instead. It it returns false then the value in the "href" attribute will be ignored.

+1, you should always use this technique.

Just thought I'd chime in because its too easy to throw around numbers without quantifying them. :)

Cheers

Tom

[pyro]

http://www.thecounter.com/stats/2003/May/javas.php

[pixelmech]

Originally posted by pyro
http://www.thecounter.com/stats/2003/May/javas.php

Right, I hear ya but I'd take those stats with a grain of salt. It's not a horrible thing to use them as a generalization, but you really have to find out what *your* customers are doing, that's really important.

You never know, maybe for you its 20% instead of 13%.

I know that just looking at that the browser stats are different from our WebTrends logs. We show NS6/7 at near 2%, which equates to a lot of users for us so we need to really take that into account.

Tom

[Cesark]

It' s enough.

[pyro]

While 13% is a broad generalization for the number of users without JavaScript, on these forums, it is nearly always used when pointing out that one's pages should not fundamentally rely on JavaScript. That remains true no matter what percentage of users to one's site have JavaScript enabled.

[pixelmech]

Originally posted by pyro
While 13% is a broad generalization for the number of users without JavaScript, on these forums, it is nearly always used when pointing out that one's pages should not fundamentally rely on JavaScript. That remains true no matter what percentage of users to one's site have JavaScript enabled.

On that I can certainly agree!

Tom