Programming, website development forum Get latest updates by RSS Follow TechnicalTalk on Twitter Follow TechnicalTalk on Facebook 
HomeSearchRecent PostsLoginRegisterContact Us

Username  
Password    
  Forgot your password?  

Pages: [1]   Go Down
 
  Email this topic  |  Print
0 Members and 1 Guest are viewing this topic.

Improving my form validation

 
webmaster forum
giclee12  Offline
Activity
0%
 
New Poster
Posts: 10
Topics: 3
February 17, 2010, 03:19:48 AM

Hi all.

A JavaScript beginner looking for help to make form validation more user-friendly.

I found the following function on the web and modified it slightly for my form, and it works fine as far as it goes.

I have added class="REQUIRED" to the tag of form fields that are compulsory, and there's an e-mail field which has class="REQUIRED EMAIL".
My question is, how do I clearly indicate in the alert box the field that is being referred to? For example, can I add some otherwise harmless element to the tag of REQUIRED fields and have it printed out in the alert box? So the alert box would read something like "Please fill out this field: Contact Name".

Quote
<script>
function validateFields() {

  var elements = document. forms["form1"]. elements;
  var emailPattern = /^[\w\. \-]+@([\w\-]+\. )+[a-zA-Z]+$/;

  for (var i = 0; i < elements. length; i++)
  {
    if (/(^| )REQUIRED( |$)/. test(elements. className) && elements. value == "")
    {
      elements. focus();
      alert("Please fill out this field. ");
      return false;
    }

    if (/(^| )EMAIL( |$)/. test(elements. className) && !emailPattern. test(elements. value))
    {
      elements. focus();
      alert("Please provide a valid e-mail address. ");
      return false;
    }
  }
}
 
webmaster forum
Admin  Offline
*
 
Code Guru
Location: India
Gender: Male
Posts: 1387
Topics: 105
NaviBuster NaviBuster
WWW
February 17, 2010, 07:24:55 AM

Have you tried with elements.name?

You can append the element name into the alert message.
 
webmaster forum
singam  Offline
Activity
0%
 
Regular Coder
Posts: 50
Topics: 19
June 23, 2010, 02:13:39 AM

If you're looking to validate user input (maybe a form or something) you might want to look at filter_var() and some of its friends.

hxxp: php. net/filter_var

It handles a lot of common cases and has some pretty nice features (enforced value ranges for integers, formatting, and so on).  If the built-in filter suite doesn't do what you want, you can define your own filter and pass it to filter_var() as a callback.



« Last Edit: June 24, 2010, 06:53:19 AM by Admin »
 
webmaster forum
svr2112  Offline
Activity
0%
 
New Poster
Posts: 8
Topics: 0
August 18, 2010, 04:36:14 AM

If you're looking to validate user input (maybe a form or something) you might want to look at filter_var() and some of its friends.

It handles a lot of common cases and has some pretty nice features (enforced value ranges for integers, formatting, and so on).  If the built-in filter suite doesn't do what you want, you can define your own filter and pass it to filter_var() as a callback.

There's a pretty good tutorial, along with a list of filters,

If you want to stick with regex, the following should get you started.

________

 Income Protection Insurance| Life Insurance Quotes
 
webmaster forum
Corrinla  Offline
Activity
0%
 
New Coder
Posts: 28
Topics: 0
January 14, 2011, 11:52:01 PM

It gets confusing reading all the seo tips that you find on the web but I think you are right about content.

pandora jewelry | wholesale
 
webmaster forum
Life Is Good!
Activity
0%
 
Professional Coder
Gender: Female
Posts: 242
Topics: 3
WWW
May 07, 2011, 08:53:09 AM

hmmm.. i'm sorry but i am getting quite confused with the code (and the tips).. sorry.. ^_^ can you guys elaborate more..?

Affordable Custom Web Design Services
 
webmaster forum
cipl  Offline
Activity
0%
 
New Coder
Posts: 25
Topics: 0
May 08, 2011, 11:24:55 PM

There is a one best option from where you can get best validation report regarding your site. There is a one site called w3cvalidation. You can get detailed validation report from the here.

Network Management Service
 
webmaster forum
netshet  Offline
Activity
0%
 
Regular Coder
Posts: 73
Topics: 2
WWW
August 06, 2011, 02:18:03 AM

alerting is a horrible way of advising that something went wrong... mostly because if you have 10 fields all required and none filled in you're going to get 10 alerts. A better design pattern would be to have a hidden div element next to each field with the same id as the field + "_error"
eg
Code:
<input type="text" id="username" class="required" value=""><div id="username_error" style="color:#f30;display:none">error msg</div>
then do
Code:
elements[i].focus();
      var error_id = elements[i].id + "_error";
      var err = document.getElementById(error_id);
      err.innerHTML = "This field is required";
      err.style.display = "block";
      return false;
a: true is 1 and false is 0 right?
b: 1

hair transplant
 
  Email this topic  |  Print
Pages: [1]   Go Up
 
Jump to:  



Powered by SMF 1.1.15 | SMF © 2011, Simple Machines


Google visited last this page January 29, 2012, 08:55:18 PM