SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Validating form

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Validating form

    (I'm had a look but can't see the answer)
    I have a form for a catalogue to be ordered. It requires, name, address, city, state, postcode. E-mail and telephone are optional.
    I would like to check the form initially for empty or null fields and alert the user to that fact. Later I'll go for correctness of entries.
    I thought that it would be relatively easy but have found it not so.
    The javascript is below and reside within the <head> of the html.
    Code:
    <script language="javascript" type="text/javascript">
    function valFrm(frmName) {
    //function to check empty fields
    
    if (IsEmpty(frmName.yourname)) {
     alert('You must enter a name to receive the catalogue.');
     frmName.yourname.focus();
     return false;
    }
    if (IsEmpty(frmName.address)) {
     alert('You must enter an address to receive the catalogue.');
     frmName.address.focus();
     return false;
    }
    if (IsEmpty(frmName.city)) {
     alert('You must enter a city or town to receive the catalogue.');
     frmName.city.focus();
     return false;
    }
    if (IsEmpty(frmName.state)) {
     alert('You must enter a state or province to receive the catalogue.');
     frmName.state.focus();
     return false;
    }
    if (IsEmpty(frmName.postcode)) {
     alert('You must enter a postcode to receive the catalogue.');
     frmName.postcode.focus();
     return false;
    }
    return true;
    }
    </script>
    To call the function I am using
    HTML Code:
    <form name="catalogue" method="post" action="/PetalsandPatches/feedback230608.php" onsubmit="return valFrm('catalogue');"> 
    If I leave a field empty and press submit the fields go blank and the little progress bar fills up. The fields are emptied and I am left with the blank form. I am expecting to see the appropriate error message.

    I am sure that it is staring me in the face but I cannot see.
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tigers! View Post
    I am expecting to see the appropriate error message.
    The first place to look for error messages is the (FireFox) error console.

    Call the function like this:
    Code:
    onsubmit="return valFrm(this);"
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a lot of redundancy in your code.
    mmj

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Okay, first the form is passing 'catalogue' but the function isn't doing much with that. Pass the this keyword instead and the function will have access to the form through the frmName variable.

    Second, the IsEmpty function doesn't appear to exist, but despite that it's not needed at all. You can use the following test instead:

    Code javascript:
    if (!frmName.yourname.value) {
    	alert('You must enter a name to receive the catalogue.');
    	frmName.yourname.focus();
    	return false;
    }

    but that still involves a lot of duplication.

    Here is one way to tidy things up.

    Code javascript:
    function valIsEmpty(frm, fields) {
    	// Accepts a form and a series of form names in object notation
    	// Returns {'field': fieldName, 'msg': errorMessage}
    	// on first empty field found, and otherwise null
    	var error = {};
    	var field;
    	for (field in fields) if (fields.hasOwnProperty(field)) {
    		if (frm[field].value === '') {
    			error.field = field;
    			error.msg = fields[field];
    			return error;
    		}
    	}
    	return null;
    }
    function valFrm(frmName) {
    	var result = valIsEmpty(frmName, {
    		'yourname': 'You must enter a name to receive the catalogue.',
    		'address': 'You must enter an address to receive the catalogue.',
    		'city': 'You must enter a city or town to receive the catalogue.',
    		'state': 'You must enter a state or province to receive the catalogue.',
    		'postcode': 'You must enter a postcode to receive the catalogue.'
    	});
    	if (result) {
    		alert(result.msg);
    		frmName[result.field].focus();
    		return false;
    	}
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that.
    I thought that IsEmpty was a javascript object?

    I will give it a burl.
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    No, isEmpty is not a javascript object. Douglas Crockford has some good functions that help to remedy things.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •