Form validation in Javascript or PHP

[pascal_22]

Hello,

 

I have a question about validating a form. After a registration, the user can complete his 'Profile' with some description.......

 

I all validate with javascript, after that when all is validated, i did a

document.frmProfile.submit();

in javascrit after in PHP, i only get the data and i insert in my table...

 

Also in tath page, i use AJAX to refresh combo box without reload the page.... if change country, i refresh the State/Province of the choosen country without refresh the page(AJAX)

 

Do should i avoid javascript? because somes users can disable it?

 

What happen, if a user had disabled js? Does he able to submit the form?

 

For your information, there no button 'submit', it's a button that call a function, and if all condition is correct, i do:

document.frmProfile.submit();

 

Thanks for your help!

[Skewled]

IMO

 

If the user has Javascript disabled they know what they are doing and can enable it at will, it's enabled by default with most browser installs. You can validate with Javascript but you want to also validate on the server side using PHP or whatever your using on the server. If you don't validate at the server side then your opening up a lot of security issues.

[Psycho]

You should ALWAYS validate and sanitize user input. You can add JavaScript validation to provide a real-time feedback to the user. But, it should only be implemented in addition to the server-side validation logic.

[pascal_22]

Ok great! Thanks for your both answers. I'll check my code to validation Serverside too

 

But as you say, if i validate some input by javascript before submitting my form, what happen if a user has disabled JS: because there no submit button... it's a button that calls a JS function and i submit via JS:

document.frmProfile.submit();

 

Will the form submit?

 

Thanks!

[Psycho]

Ok great! Thanks for your both answers. I'll check my code to validation Serverside too

 

But as you say, if i validate some input by javascript before submitting my form, what happen if a user has disabled JS: because there no submit button... it's a button that calls a JS function and i submit via JS:

document.frmProfile.submit();

 

And why would you NOT make it a submit button? You can and should use a submit button. If you want specific JS to execute upon submission, the correct way to implement it is with an onsubmit() trigger to call your validation functions. If validations pass the function should return true, else it should return false.

 

Form tag should look something like this. Be sure to use the "return functionName();" format. The use of return allows to you allow/prevent the actual submission based upon the return value of the function.

<form name="myForm" action="processingPage.php" method="post" onsubmit="return validateForm(this);">

 

Then your function will do the validations and return false if there are problems, else it will return true.

function validateForm(formObj)
{
    if(formObj.elements['name'] == '')
    {
        alert('The name field cannot be empty');
        return false;
    }
    if(formObj.elements['email'] == '')
    {
        alert('The email field cannot be empty');
        return false;
    }
    return true;
}

 

That is just a rough example for explanatory purposes. I would always create my validation logic to check for all possible errors and display then instead of exiting after the first error.

 

Using the above format, if a user has JS enabled, then that functionality will execute. If not, the form will submit normally and the server-side validation will ensure there are no problems.

[pascal_22]

Great!! Thanks for the exemple!!!

I 'll update my code now!!!

 

Thanks a lot!!

 

Pascal

[pascal_22]

Sorry i have another question:

For my combobox of State/Province, that i refresh with AJAX on change of country combobox, without reload the page... If JS is disabled, it won't work i suppose...?

 

Do you have a suggestion that it works with and without JS?

 

Thanks a lot!

Pascal

[Psycho]

Sorry i have another question:

For my combobox of State/Province, that i refresh with AJAX on change of country combobox, without reload the page... If JS is disabled, it won't work i suppose...?

 

Do you have a suggestion that it works with and without JS?

 

Thanks a lot!

Pascal

 

You should build your pages without JS and then add JS to enhance the experience. Yes, you can work around the problem of the dynamic text boxes, but it will require having the page load with just the first option along with a submit button. You could do this one of two ways. Have the page load with the all the content but define the style property of the 2nd select and the rest of the form as hidden/disabled. Once the page loads use JS to unhide that content. So, if the user does not have JS enabled they will only see the 1st select and the submit button. If the user has JS enabled they will see all the content. Then you need to modify the processing page to detect when a selection/change is made to the first select as opposed to a compete form submission.

 

Basically, it will get a whole lot more complicated. So, another approach is to do a JS check (typically by trying to set a cookie with JS and checking it with PHP). If the user doesn't have JS enabled give them an appropriate error message and don't allow them to use the site. It all depends how important it is to you that the site work for users w/o JS enabled. With smart phones becoming more common for navigating the net it is starting to become more important where it was almost negligible.

[pascal_22]

Ok thanks!

 

Should CSS load if JS disabled.

here my code:

<link rel='stylesheet' type='text/css' href='CSS/css.css'>

 

But when i disabled JS, it seems that no style sheet recognize. my display has no style

 

thanks

Pascal

[pascal_22]

Ok forgot my last question.... my css sorks with or w/o JS

 

Thanks for all your good answer!!

 

Pascal

[pascal_22]

Sorry to re open this topics buti i'm actually with a designer to change all the design of my web site.

 

And all button will be change for div with icon on it to make all beautiful.

 

My problem is the web designer give me the code:

 

<div class="btn-blue validate['submit']">.....

but what is the "validate["..."]"

How i set it or use it...

 

for my form, i validate in JS if it's enabled and after in PHP, if JS is Disabled, the form is submited and i only validate in PHP ---> that was with standart html buttom....

 

but now how i do it with div...... with the class=validate["submit"]

 

 

Thanks a lot for your help!!!

 

PAscal

 

 

[Christian F.]

Seems like he's using the formValidator/validationEngine jQuery plugin.

[pascal_22]

Yeah that right!!

I think is that!!

 

But it need JS!! And and want that my website works even if JS is enable or disable...

 

Is there a way to do a validation that will check if JS is enable, and if it's enabled i put 'true' in a variable $_session["jsenabled"]

so when it's time to write the button, i check if it is enabled, if yes, i put my button make with div... and if JS is disable, i put a standard button...

 

 

OR

 

In my new button(made of div), i put an standart button but all transparent... so the user will think they click on my beautifull button but in fact, they will click on invisible button in my div...

 

Is there a way that make it work with NO JS and with JS?

 

Thanks!!

 

[Christian F.]

You choose yourself whether or not you want to use it, but it does not stop you from using any server-side validation. If anything, it's just an extra help for your users, as they don't have to submit the content before getting told about any obvious invalid input.

 

So the answer to your question is: Yes, use server-side validation no matter what, and let the JS be an extra that works (or not, depending upon the JS capabilities of the browser).

[pascal_22]

sure ok thanks!

 

But my question was:

i want that with no HS or with JS... and want that when user click on my button, that the form submit no matter if js in enabled or not

 

With a standart html button, i did it...

 

but in my new button (made from div, span...) how can i submit my form....?

 

That is my question....

 

I dont was standard button on my form... i want to make it beautifull....

 

thanks a lot!!

 

[Christian F.]

Use standard HTML elements to accomplish standard HTML features. Only a (submit) button can submit a form, if you don't have JS.

If you want to style the button, use CSS to style the button. Though, take heed and don't style it too much. You still want people to recognize it as a button, after all.

[Psycho]

Only a (submit) button can submit a form, if you don't have JS.

 

While I whole heartily agree that you should stick to standard form elements, the above is not entirely true. It is perfectly valid to use an image as a submit button with standard HTML

<input type="image" src="images/submit.gif" height="30" width="173" border="0" alt="Submit Form">