www.webdeveloper.com
Results 1 to 2 of 2

Thread: Basic Form Validation

  1. #1
    Join Date
    Feb 2011
    Posts
    1

    Basic Form Validation

    Having a bit of trouble with some basic form validation, basically what is meant to happen is if any of the fields are empty when the user clicks submit, a message comes up in the span 'eFld1'. At first i thought it was because document.write() had already been run but after adding an alert() to the script that didnt work either so im quite stumped as to whats going on

    What am i doing wrong and what should i be doing?


    Script in Header
    Code:
    <script type="text/javascript">
    var errorList1 = ""
    var errorList2 = ""
    var regForm = document.register
    
    function validateForm() {
    
    	if (regForm.uName.value == null) {
    		alert('somethings wrong')
    		return false;
    	} 
    	
    	else {
    		return true;
    	}
    }
    </script>
    Form
    Code:
    <form name="register"  method="post">
    <span id="eFld1">
    </span>
    Name: <br />
    <input type="text" name="bName" /><br />
    Phone: <br />
    <input type="text" name="bPhone" /><br /><br />
    <span id="eFld2">
    </span>
    Name: <br />
    <input type="text" name="uName" /><br />
    Phone: <br />
    <input type="text" name="uPhone" />
    <input type="submit" onSubmit="validateForm"/>
    </form>
    Any help would be appreciated.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The submit action belongs to the FORM element, not to the button. Anyway, to prevent an action you should "ask" for a certain return from the function. And when you call a function, call a function, () included.
    Code:
    <form name="register"  method="post" onsubmit="return validateForm()">
    ...
    <input type="submit" value="Submit" />
    Now the JavaScript code has also some mistakes
    Code:
    var regForm = document.register
    
    function validateForm() {
    
    	if (regForm.uName.value == null) {
    1. You try to refer an element (the form) before he was actually loaded. You should use the reference inside the function, as a local variable, not as global. In fact you don't need that: You may pass the form itself to the function, on using the self reference: this

    2. A value of an element is never null (by the way, in JavaScript null is an object, not a value. So that only the objects defined, but without any clear reference can be null). It is an empty string

    So:
    Code:
    <script type="text/javascript">
    var errorList1 = ""
    var errorList2 = ""
    function validateForm(regForm) {
    
    	if (regForm['uName'].value == '') {
    		alert('somethings wrong')
    		return false;
    	} 
    }
    </script>
    ...
    ...
    <form name="register"  method="post" onsubmit="return validateForm(this)">
    ...
    <input type="submit" value="Submit" />
    You don't need to return true. If the validation is passed, the function returns itself, which is equivalent with a Boolean true anyway.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles