How can i add some verification and required fields to this form

[samhor]

Hi

I have made the below form but i want to make some of the boxes etc a mandatory/required e.g. so they have to fill them in. How would i do it?

[jalarie]

I stripped it down to a bare minimum example and indented to make it easier to follow; you get to expand it as needed:

<script type="text/javascript">
 function CheckForm() {
  IName=document.forms[0].username.value;
  if (IName == '') {
   alert('Name is required.');
   return false;
  }
 return true;
}
</script>

<form onsubmit="return CheckForm();">
 <label for="Name">Name:</label>  
 <input type="text" name="username" size="50" />
 <input type="submit"> 
</form>

[WolfShade]

Server-side validation is generally best (users can disable javascript - or you can force the form to submit via JavaScript, so if it's disabled the form can't submit.)

Basically, you get the value/selectedIndex of the form inputs via the DOM. Client-side validation that I like (give the form a name; change submit button to input type="button" and add onclick="return validateForm(this.form);"):

function validateForm(formObj){
var warn = "";
formObj.username.value = formObj.username.value.replace(/^\s|\s$/g,"");// trim whitespace from beginning and end of string
if(formObj.username.value.length < 5){ warn += "Please enter your Name.\n"; }
  ...
if(formObj.country.selectedIndex == 0){ warn += "Please select a Country.\n"; }
if((!formObj.choice[0].checked) && (!formObj.choice[1].checked)){ warn += "Please let us know if we can use your email for SPAMMING.\n"; }

if(warn == "") {formObj.submit(); }
else{ alert(warn); return false;}

}

[felgall]

Originally Posted by WolfShade

Server-side validation is generally best (users can disable javascript - or you can force the form to submit via JavaScript, so if it's disabled the form can't submit.)

Doing that would prevent those who don't have JavaScript from ever being able to submit the form. Depending on which country your visitors are in and what anti-discrimination laws apply in their country not allowing those without JavaScript to use a form may be illegal and a large fine might result.

There are some groups of disabled people who either use browsers that don't support JavaScript or where enabling JavaScript would make it impossible for them to interact with the page and such people have been known to take legal action when sites discriminate against them by not providing them with a way to interact with the site. There was one case where a large retailer whose site discriminated by requiring JavaScript that was settled out of court for a few million dollars.

Even where your site is unimportant enough to not fall foul of anti-discrimination laws, do you really want to annoy some of your visitors and have them telling all your friends how useless your site is?

[samhor]

Hello

I have tried amending this but when adding the below it just stops working and the message doesn't pop up any more... Any ideas?

[jalarie]

The "return true;" line belongs at the end of the function. Do all of the validation parts (name, address, ....) and their respective "return false;" lines first. If the user gets past all of those error checks, then the function returns the true value and the form submits.

[samhor]

Originally Posted by jalarie

The "return true;" line belongs at the end of the function. Do all of the validation parts (name, address, ....) and their respective "return false;" lines first. If the user gets past all of those error checks, then the function returns the true value and the form submits.

Yes thanks got it working now.. How much would the code change for using drop down menus. I have tried with the below but can't seem to get it working.

[jalarie]

You first pick up the index of the selected item, use that to get the "text" and "value" items, and then decide if the user has chosen something other than the default:

  SI=document.forms[0].country.selectedIndex;     // select index
  ST=document.forms[0].country.options[SI].text;  // ...on-screen text
  SV=document.forms[0].country.options[SI].value; // ...embedded value
  if (SV == "Default") { alert('Pick something'); return false; }

The "Oz", "UK", and "Usa" pieces are the "text" items and the "AUS", "UK", and "USA" pieces are the "value" items.

[samhor]

[QUOTE=jalarie;1306750]You first pick up the index of the selected item, use that to get the "text" and "value" items, and then decide if the user has chosen something other than the default:
thanks

[felgall]

Don't forget to get rid of the debugging alert() calls before you make the page live. You don't want people checking the checkbox that most broswers add to alert() to make it more useful for debugging.

[samhor]

thanks

[Philip M]

Originally Posted by felgall

Doing that would prevent those who don't have JavaScript from ever being able to submit the form. Depending on which country your visitors are in and what anti-discrimination laws apply in their country not allowing those without JavaScript to use a form may be illegal and a large fine might result.

There are some groups of disabled people who either use browsers that don't support JavaScript or where enabling JavaScript would make it impossible for them to interact with the page and such people have been known to take legal action when sites discriminate against them by not providing them with a way to interact with the site. There was one case where a large retailer whose site discriminated by requiring JavaScript that was settled out of court for a few million dollars.

Horsepoo. Specify an authority, please. A person of your stature ought not to propagate silly stories like that.

[Philip M]

Originally Posted by samhor

I'm also thinking of adding an email field. How would i write the code to validate the email address e.g. an @ has been entered?

Have you tried using the search feature of this forum? That question has been asked and answered many times.

if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(email.value))) {   /// returns true if invalid address syntax

felgall might wish to replace {2,4} by {2,6}. In reality the domains travel and museum are very rarely found. In fact, never in my experience.

Simply testing for the presence of an @ is completely inadequate. Even testing for the presence of a single @.

Another (additional?) way is to cause the user to enter his email address twice to confirm. That still does not offer complete protection, but if the user cannot get his own email address correct that is his responsibility. Nothing will prevent typos such as @gmial.com.

[Philip M]

Originally Posted by samhor

Yes thanks got it working now.. How much would the code change for using drop down menus. I have tried with the below but can't seem to get it working.

Icountry=document.forms[0].country.value;
  if (Icountry == '') {
   alert('Country is required.');
   return false;
  }
-----------------------------
<label for="country">Country:</label> 
  <select name="country">  
    <option selected="" value="Default">Choose a Country </option>  
    <option value="AUS">Oz</option>  
    <option value="UK">UK</option> 
    <option value="USA">Usa</option> 
  </select>

Again, have you tried using the forum search feature?

Icountry=document.forms[0].country.value;
if (Icountry == "Default") {  // the value of the first option with text Choose A Country
alert ('Country is required.');
return false;
}
-----------------------------
<label for="country">Country:</label> 
  <select name="country">  
    <option selected value="Default">Choose a Country </option>  
    <option value="AUS">Australia</option>  
    <option value="UK">UK</option> 
    <option value="USA">USA</option> 
  </select>

address=document.forms[0].address.value; // avoid using the same name for an HTML element and a Javascript variable. Always include the var keyword to make your variable local to the function.

It's a really bad idea to use NUMBERED forms. (document.forms[0])
And NAMED forms are considered obsolete.
You should give IDs to your <form> tags.

if (address == '') {
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 and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

<javascript> should be <script type = "text/javascript">


I have the idea that your grasp of Javascript at present is not really up to what you are trying to achieve.

[samhor]

thanks for the info very helpful.

I have changed <script> to <script type="text/javascript">

would i still end it with <script> because </script type="text/javascript"> is an error ?