SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Form help

  1. #1
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form help

    This is part of my form code:

    <span style=color:'red'>*</span> Email:
    <input type="text" name="email" id="Email" size="20"><br>

    how can i make it do an alert if they dont fill in the formbox?
    Animated Chatrooms - www.121chatrooms.net

  2. #2
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You would use a JavaScript alert

    Put this in the <head> here </head>
    Code JavaScript:
    <script type='text/javascript'>
    function isEmpty(elem, helperMsg){
        if(elem.value.length == 0){
            alert(helperMsg);
            elem.focus();
            return true;
        }
        return false;
    }
    </script>
    <form>

    Basically your input field is called "REQ",
    When the submit button is clicked it plays the "isEmpty" function,
    The isEmpty function checks the "REQ" form,
    If it is not empty nothing happens, if it is empty it alerts you.

    This is your html.
    Code HTML:
    <input type="text" id='REQ' name="email" id="Email" size="20" /><br />
    <input type='submit' onclick="isEmpty(document.getElementById('REQ'), 'Please Enter an Email')" />
    </form>

    If this doesn't work you can check in the JavaScript forums they are quick =)

  3. #3
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it seems to work but when the alert pops up i press ok adn it goes to the form auth page, when i want tit to stay on the same page how do i do that?
    Animated Chatrooms - www.121chatrooms.net

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    A better solution is where you don't mess up the html with javascript, even event handlers. You don't put css in the html so likewise keep the javascript from messing up the code.

    I've taken the liberty of providing css declarations for the red stars and error messages. They both do the same job for now, but you will be able to later on style them differently should you desire.

    Code css:
    form p {
    	margin: 0 auto;
    }
    .alert {
        color: red;
    }
    .error {
        color: red;
    }

    I've given the form an identifier of "subscription". You should change that to meaningfully represent the intended purpose of the form.

    The form also uses paragraphs to separate individual lines. Not only is the the recommended technique to use, but line breaks are a non-conforming use that abuses the br element, and the div element is completely out when it comes to containing phrasing content.

    Code html4strict:
    <form id="subscription" action="...">
        <p><span class="alert">*</span> Email:
        <input type="text" name="email" id="Email" size="20"></p>
    </form>

    Place your scripts at the bottom of the body, just before the </body>
    Not only does that improve the loading time for your page, but it makes it easier to target page elements as well.
    http://developer.yahoo.com/performance/rules.html

    When the attempted form submission produces an error, you can either go for the alert box, or you can place the message just above the form field as an error message. You've seen from previous code on here how to do the former, so I'll demonstrate the latter.

    With a function like isEmpty, it should have only one reason to change, so I'll separate out the jobs to be done into separate functions.

    The following script does some very simple things. If an error occurs it clears any previous errors for that form element and displays an error message just above the element.

    If the element passes the validation then any errors that may have previously been there for that element are removed.

    Code javascript:
    document.getElementById('subscription').onsubmit = function () {
    	var canSubmit = true;
        var el = this.elements['email'];
    	if (isEmptyField(el)) {
    		canSubmit = false;
    		placeErrorMessage('Please enter an email address', el.parentNode);
    	} else {
    		removeErrorMessage(el.parentNode);
    	}
    	return canSubmit;
    }
    function isEmptyField(el) {
        if(el.value.length === 0) {
            return true;
        }
        return false;
    }
    function placeErrorMessage(message, el) {
    	console.log(hasErrorMessage(el));
    	if (hasErrorMessage(el)) {
    		removeErrorMessage(el);
    	}
    	var p = document.createElement('p');
    	var text = document.createTextNode(message);
    	p.appendChild(text);
    	p.className = 'error';
    	el.parentNode.insertBefore(p, el);
    }
    function hasErrorMessage(el) {
    	el = el.previousSibling;
    	while (el && el.nodeType !== 1) {
    		el = el.previousSibling;
    	}
    	if (el && el.className === 'error') {
    		return true;
    	}
    	return false;	
    }
    function removeErrorMessage(el) {
    	if (hasErrorMessage(el)) {
    		el = el.previousSibling;
    		while (el.nodeType !== 1) {
    			el = el.previousSibling;
    		}
    		el.parentNode.removeChild(el);
    	}
    }

    The end result is:

    Please enter an email address
    * Email: [___________________]
    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
  •