www.webdeveloper.com
Results 1 to 14 of 14

Thread: A simple "contact us" form validation

  1. #1
    Join Date
    Apr 2012
    Posts
    47

    Question A simple "contact us" form validation

    Here is the form on my webpage:
    http://grabilla.com/02506-3d89d9eb-a...c3a83cfd12.png

    I have to use JavaScript to validate the fields and I don't even know where to begin. Here is my HTML code:

    HTML Code:
    <section>
    		<h1>Contact Us</h1>
    		<p><a href="mailto:andrew.olle@gmail.com?Subject=Thoughts%20on%20these%20clowns">Our Email Link</a></p>
        	<form action="thank_you.html" method="get"
            	name="contact_form" id="contact_form">
        		<fieldset>
    	        	<legend>Contact Us</legend>
    	        	<label for="email">E-Mail:</label>
    	        	<input type="email" name="email" id="email" autofocus required><br>
            		<label for="first_name">First Name:</label>
    				<input type="text" name="first_name" id="first_name" required><br>
    				<label for="last_name">Last Name:</label>
    				<input type="text" name="last_name" id="last_name" required><br>
    				<label for="city">City:</label>
    				<input type="text" name="city" id="city"><br>
    				<label for="state">State:</label>
    				<input type="text" name="state" id="state"><br>
    				<label for="comments">Comments:</label>
    				<textarea name="comments" id="comments" rows="5" cols="23"></textarea>
    				</fieldset>
    			<fieldset id="buttons">
    				<legend>Submit</legend>
    				<label>&nbsp;</label>
    				<input type="submit" id="submit" value="Submit">
    				<input type="reset" id="reset" value="Reset Fields"><br>
    			</fieldset>
    		</form>
    	</section>
    I'm thinking this might be a little time consuming, but if anyone is really bored, it would be a great help and MUCH appreciated.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,046
    Quote Originally Posted by Tullamore View Post
    I have to use JavaScript to validate the fields and I don't even know where to begin.
    you could begin here

  3. #3
    Join Date
    Apr 2012
    Posts
    47
    I never thought of that...thanks. *end sarcasm* I was actually hoping someone would just give me the code to paste in. This project is almost due and I have a ton of other things to do to the site before then. Yes, I was trying to take the easy way out...wishful thinking I know. Thanks for looking though...

  4. #4
    Join Date
    May 2012
    Location
    India , Calicut
    Posts
    4

    Resolved_by_jithu

    Quote Originally Posted by Tullamore View Post
    I never thought of that...thanks. *end sarcasm* I was actually hoping someone would just give me the code to paste in. This project is almost due and I have a ton of other things to do to the site before then. Yes, I was trying to take the easy way out...wishful thinking I know. Thanks for looking though...

    [code]<html >
    <head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    function _validate() {
    var emVal, fnVal, lnVal, cityVal, StatVal, CommVal;
    var _email = document.getElementById('email').value;
    var _fname = document.getElementById('first_name').value;
    var _lname = document.getElementById('last_name').value;
    var _city = document.getElementById('city').value;
    var _state = document.getElementById('state').value;
    var _coomments = document.getElementById('comments').value;
    var _lblError = document.getElementById('lblError');

    if (_email != "" || _email != null) {
    var b = _emailValidator(_email);
    if (b == false) {
    _lblError.innerHTML = "Invalid Email";
    emVal = false;
    }
    else {
    emVal = true;
    if (_fname == "" || _fname == null) {
    _lblError.innerHTML = "Enter First Name";
    fnVal = false;
    }
    else {
    fnVal = true;
    if (_lname == "" || _lname == null) {
    lblError.innerHTML = "Enter Last Name";
    lnVal = false;
    }
    else {
    lnVal = true;
    if (_city == "" || _city == null) {
    lblError.innerHTML = "Enter City"
    cityVal = false;
    }
    else {
    cityVal = true;
    if (_state == "" || _state == null) {
    _lblError.innerHTML = "Enter State";
    StatVal = false;
    }
    else {
    StatVal = true;
    if (_coomments == "" || _coomments == null) {
    _lblError.innerHTML = "Enter your comments";
    CommVal = false;
    }
    else {
    CommVal = true;
    if (emVal == true && fnVal == true && lnVal == true && cityVal == true && StatVal == true && CommVal == true) {
    postIt();
    }

    }
    }
    }

    }


    }
    }
    }
    else {
    _lblError.innerHTML = "Enter Email ID";
    emVal = false;
    }


    }
    function _emailValidator(_email) {
    var a;
    var lastAtPos = _email.lastIndexOf('@');
    var lastDotPos = _email.lastIndexOf('.');
    if (lastAtPos < lastDotPos && lastAtPos > 0 && lastDotPos > 2 && (_email.length - lastDotPos) > 2) {
    a = true;
    }
    else {
    a = false;
    }
    return a;
    }
    function hideIt() {
    document.getElementById('lblError').innerHTML = "";
    }
    function postIt() {
    document.forms["_form"].submit();
    }
    </script>
    <script type="text/javascript">

    </script>
    </head>
    <body>
    <section>
    <h1>Contact Us</h1>
    <p><a href="mailto:andrew.olle@gmail.com?Subject=Thoughts%20on%20these%20clowns">Our Email Link</a></p>
    <form action="thank_you.html" method="get"
    name="contact_form" id="_form">
    <fieldset>
    <legend>Contact Us</legend>
    <label for="email">E-Mail:</label>
    <input type="email" name="email" id="email" autofocus required><br>
    <label for="first_name">First Name:</label>
    <input type="text" name="first_name" id="first_name" required><br>
    <label for="last_name">Last Name:</label>
    <input type="text" name="last_name" id="last_name" required><br>
    <label for="city">City:</label>
    <input type="text" name="city" id="city"><br>
    <label for="state">State:</label>
    <input type="text" name="state" id="state"><br>
    <label for="comments">Comments:</label>
    <textarea name="comments" id="comments" rows="5" cols="23"></textarea>
    </fieldset>
    <fieldset id="buttons">
    <legend>Submit</legend>
    <label id="lblError">&nbsp;</label><br />
    <input type="button" id="_submit" value="Submit" onclick="_validate()">
    <input type="reset" id="reset" value="Reset Fields"><br>
    </fieldset>
    </form>
    </section>
    </body>
    </html>[code]




    A little changes in HTML too... so, verify it. Working!!!

  5. #5
    Join Date
    May 2012
    Location
    India , Calicut
    Posts
    4

    Resolved_by_jithu

    Some changes in HTML Also....
    verify it.


    Code:
    <html >
    <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
            function _validate() {
                var emVal, fnVal, lnVal, cityVal, StatVal, CommVal;
                var _email = document.getElementById('email').value;
                var _fname = document.getElementById('first_name').value;
                var _lname = document.getElementById('last_name').value;
                var _city = document.getElementById('city').value;
                var _state = document.getElementById('state').value;
                var _coomments = document.getElementById('comments').value;
                var _lblError = document.getElementById('lblError');
    
                if (_email != "" || _email != null) {
                    var b = _emailValidator(_email);
                    if (b == false) {
                        _lblError.innerHTML = "Invalid Email";
                        emVal = false;
                    }
                    else {
                        emVal = true;
                        if (_fname == "" || _fname == null) {
                            _lblError.innerHTML = "Enter First Name";
                            fnVal = false;
                        }
                        else {
                            fnVal = true;
                            if (_lname == "" || _lname == null) {
                                lblError.innerHTML = "Enter Last Name";
                                lnVal = false;
                            }
                            else {
                                lnVal = true;
                                if (_city == "" || _city == null) {
                                    lblError.innerHTML = "Enter City"
                                    cityVal = false;
                                }
                                else {
                                    cityVal = true;
                                    if (_state == "" || _state == null) {
                                        _lblError.innerHTML = "Enter State";
                                        StatVal = false;
                                    }
                                    else {
                                        StatVal = true;
                                        if (_coomments == "" || _coomments == null) {
                                            _lblError.innerHTML = "Enter your comments";
                                            CommVal = false;
                                        }
                                        else {
                                            CommVal = true;
                                            if (emVal == true && fnVal == true && lnVal == true && cityVal == true && StatVal == true && CommVal == true) {
                                                postIt();
                                            }
                                      
                                        }
                                    }
                                }
    
                            }
    
    
                        }
                    }
                }
                else {
                    _lblError.innerHTML = "Enter Email ID";
                    emVal = false;
                }
    
    
            }
            function _emailValidator(_email) {
                var a;
                var lastAtPos = _email.lastIndexOf('@');
                var lastDotPos = _email.lastIndexOf('.');
                if (lastAtPos < lastDotPos && lastAtPos > 0 && lastDotPos > 2 && (_email.length - lastDotPos) > 2) {
                    a = true;
                }
                else {
                    a = false;
                }
                return a;
            }
    function hideIt() {
        document.getElementById('lblError').innerHTML = "";
    }
    function postIt() {
        document.forms["_form"].submit();
    }
    </script>
    <script type="text/javascript">
        
        </script>
    </head>
    <body>
        	<section>
    		<h1>Contact Us</h1>
    		<p><a href="mailto:andrew.olle@gmail.com?Subject=Thoughts%20on%20these%20clowns">Our Email Link</a></p>
        	<form action="thank_you.html" method="get"
            	name="contact_form" id="_form">
        		<fieldset>
    	        	<legend>Contact Us</legend>
    	        	<label for="email">E-Mail:</label>
    	        	<input type="email" name="email" id="email" autofocus required><br>
            		<label for="first_name">First Name:</label>
    				<input type="text" name="first_name" id="first_name" required><br>
    				<label for="last_name">Last Name:</label>
    				<input type="text" name="last_name" id="last_name" required><br>
    				<label for="city">City:</label>
    				<input type="text" name="city" id="city"><br>
    				<label for="state">State:</label>
    				<input type="text" name="state" id="state"><br>
    				<label for="comments">Comments:</label>
    				<textarea name="comments" id="comments" rows="5" cols="23"></textarea>
    				</fieldset>
    			<fieldset id="buttons">
    				<legend>Submit</legend>
    				<label id="lblError">&nbsp;</label><br />
    				<input type="button" id="_submit" value="Submit" onclick="_validate()">
    				<input type="reset" id="reset" value="Reset Fields"><br>
    			</fieldset>
    		</form>
    	</section>
    </body>
    </html>

  6. #6
    Join Date
    Apr 2012
    Posts
    47
    Wow! Thank you sooooo much! I'll plug this in after class and reply again then but I see no reason this won't work. Thanks a TON!

  7. #7
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    If you feel good, you might also give this a look!
    HTML Code:
    <section>
        <h2>Contact Us</h2>
        <a href="mailto:andrew.olle@gmail.com?Subject=Thoughts&#37;20on%20these%20clowns">Our Email Link</a>
        
        <form action="thank_you.html" method="get" name="contact_form" onsubmit="return validate()">
            <fieldset>
                   <legend>Contact Us</legend>
                
                   <label>E-Mail:</label>
                    <input type="email" name="email" title="Enter a valid email address!" placeholder="me@example.com" onclick="select()" required /> <br/>
                
                <label>First Name:</label>
                    <input type="text" name="first_name" title="Enter your first name!" placeholder="First Name" onclick="select()" required /> <br/>
                
                <label>Last Name:</label>
                    <input type="text" name="last_name" title="Enter your last name!" placeholder="Last Name" onclick="select()" required /> <br/>
                
                <label>City:</label>
                    <input type="text" name="city" title="Enter your city!" placeholder="City" onclick="select()" required /> <br/>
                
                <label>State:</label>
                    <input type="text" name="state" title="Enter your state!" placeholder="State" onclick="select()" required /> <br/>
                
                <label>Comments:</label>
                    <textarea name="comments" rows="5" cols="23" title="Enter your comments!" onclick="select()"></textarea>
            </fieldset>
                
            <fieldset>
                <legend>Submit</legend>
                <label id="error"> </label> <br/>
                <input type="submit" value="Submit" />
                <input type="reset" /> <br/>
            </fieldset>
        </form>
    </section>
    HTML Code:
    <script>
        var validate = function () {
            if( (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(document.contact_form.email.value))) || document.contact_form.email.value == "" || document.contact_form.first_name.value == "" || document.contact_form.last_name.value == "" || document.contact_form.city.value == "" || document.contact_form.state.value == "" || document.contact_form.comments.value == "" ) {
                document.getElementById('error').innerHTML = '<strong style="color:red;">Please fill in the form correctly! DON\'T leave any field blank! <\/strong>';
                return false;
            }
        }
    </script>
    Last edited by TheAliveWinner; 05-07-2012 at 02:23 PM. Reason: ;)
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  8. #8
    Join Date
    Apr 2012
    Posts
    47
    Awesome! Thanks to both of you. One last question..we're supposed to have the javascript on it's own file within the the directory, is there anything special I have to do besides linking the file to the existing HTML file? I think I can pretty much figure it out but just thought I'd ask.

  9. #9
    Join Date
    Apr 2012
    Posts
    47
    Last question... The code highlighted below:

    Code:
    <form action="thank_you.html" method="get" name="contact_form" onsubmit="return validate()">
    is what the JavaScript refers to right? So if I have the JavaScript on a page titled contact.js, I should replace the "thank_you.html" with contact.js ? Or no?

  10. #10
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194

    Smile

    Quote Originally Posted by Tullamore View Post
    Awesome! Thanks to both of you. One last question..we're supposed to have the javascript on it's own file within the the directory, is there anything special I have to do besides linking the file to the existing HTML file? I think I can pretty much figure it out but just thought I'd ask.
    Firstly, you are most welcome!

    Lastly, you do not have to do anything special besides linking your JS file to the HTML one!

    HTML Code:
    <script src="yourFile.js" type="text/javascript"></script>
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  11. #11
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194

    Exclamation

    Quote Originally Posted by Tullamore View Post
    Last question... The code highlighted below:

    Code:
    <form action="thank_you.html" method="get" name="contact_form" onsubmit="return validate()">
    is what the JavaScript refers to right? So if I have the JavaScript on a page titled contact.js, I should replace the "thank_you.html" with contact.js ? Or no?
    NO!

    "thank_you.html", as in your case, refers to the page to which the user is redirected after submitting the contact form! You do not have to put your JavaScript source there.
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  12. #12
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    This should be a more appropriate solution (certainly not the best but better than before)!
    HTML Code:
    <section>
        <h2>Contact Us</h2>
        <a href="mailto:andrew.olle@gmail.com?Subject=Thoughts&#37;20on%20these%20clowns">Our Email Link</a>
        
        <form action="thank_you.html" method="get" name="contact_form" onsubmit="return Validate()">
            <fieldset>
                   <legend>Contact Us</legend>
                
                   <label>E-Mail (*):</label>
                    <input type="email" name="_email" onkeyup="CheckForBlank('_email')" onblur="CheckForBlank('_email')" title="Enter a valid email address!" placeholder="me@example.com" onclick="select()" required /> <label id="contact_form_email"></label> <br/>
                
                <label>First Name (*):</label>
                    <input type="text" name="_fname" onkeyup="CheckForBlank('_fname')" onblur="CheckForBlank('_fname')" title="Enter your first name!" placeholder="First Name" onclick="select()" required /> <label id="contact_form_fname"></label> <br/>
                
                <label>Last Name (*):</label>
                    <input type="text" name="_lname" onkeyup="CheckForBlank('_lname')" onblur="CheckForBlank('_lname')" title="Enter your last name!" placeholder="Last Name" onclick="select()" required /> <label id="contact_form_lname"></label> <br/>
                
                <label>City (*):</label>
                    <input type="text" name="_city" onkeyup="CheckForBlank('_city')" onblur="CheckForBlank('_city')" title="Enter your city!" placeholder="City" onclick="select()" required /> <label id="contact_form_city"></label> <br/>
                
                <label>State (*):</label>
                    <input type="text" name="_state" onkeyup="CheckForBlank('_state')" onblur="CheckForBlank('_state')" title="Enter your state!" placeholder="State" onclick="select()" required /> <label id="contact_form_state"></label> <br/>
                
                <label>Comments (*):</label>
                    <textarea name="_comments" onkeyup="CheckForBlank('_comments')" onblur="CheckForBlank('_comments')" rows="5" cols="23" title="Enter your comments!" onclick="select()"></textarea> <label id="contact_form_comments"></label>
            </fieldset>
                
            <fieldset>
                <label id="error"> </label> <br/>
                <input type="submit" name="_submit" value="Submit Form" />
                <input type="reset" value="Reset Form" /> <br/>
            </fieldset>
        </form>
    </section>
    
    <script>
        var CheckForBlank = function (name) {
            var x = document.forms['contact_form'].elements[name].value;
            var temp = '';
            for(i=0;i<x.length;i++){
                temp = x.replace(/  /g,' ');
                x = temp;
            }
            if(temp == ' ' || temp == '  ') temp = '';
            document.forms['contact_form'].elements[name].value = temp;
            
            if(temp == '') {
                document.forms['contact_form'].elements[name].focus();
                
                document.getElementById('contact_form'+name).innerHTML = '<strong style="color:red;">You can not leave this field blank!<\/strong>';
            } else{
                document.getElementById('contact_form'+name).innerHTML = '';
            }
        }
    
        var Validate = function () {
            if( (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(document.contact_form._email.value))) || document.contact_form._email.value == "" || document.contact_form._fname.value == "" || document.contact_form._lname.value == "" || document.contact_form._city.value == "" || document.contact_form._state.value == "" || document.contact_form._comments.value == "" ) {
                document.getElementById('error').innerHTML = '<strong style="color:red;">Please fill in the form correctly! Don\'t forget to provide a valid email address! <\/strong>';
                return false;
            }
        }
    </script>
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    andrew.olle has to prepare himself for receiving a lot of spam after sharing his email obviously ))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  14. #14
    Join Date
    Apr 2012
    Posts
    47
    Thanks for all the feedback everyone. And good point on the spam Padonak. Oh well, live and learn I guess.

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