4 Replies - 416 Views - Last Post: 07 April 2014 - 01:00 PM

#1 ultrapulse  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 23-October 13

functions

Posted 07 April 2014 - 12:03 AM

I have created two functions to validate the users first and last names.

For some reason the functions are either not working or just not being called properly.

Here are my functions for validation

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Contact Us</title>
    <script>
        function validateForm(form)
        {
            return validateName(form);
        }

        function validateName(form)
        {
            var fName = document.getElementById("strFirstName").value;
            var lName = document.getElementById("strLastName").value;

            if(fName == "" || fName == null)
            {
                fName.style.backgroundColor = "RosyBrown";
                alert("You must enter your first name");
                form.strFirstName.focus();
                return false;
            }

            if(lName == "" || lName == null)
            {
                lName.style.backgroundColor = "RosyBrown";
                alert("You must enter your last name");
                form.strLastName.focus();
                return false;
            }
            return true;
        }
    </script>



And here is my html code.

</head>

<body style = "background-color:#a7aeb4">
<h1 align = "center">Contact Us</h1>
    <form name = "contactForm" onsubmit = "return validateForm(this)" style = "background-color:#a7aeb4">
        <table style = "margin-left:auto;margin-right:auto ; background-color:#e0e6eb;height:40px">
            <tr style = "background-color:#c3cfda;height:40px"> <th colspan = "2"> <strong>Use this form to contact us and we will get back to you within 12 hours</strong></th></tr>

            <tr>
                <td style = "height:40px">
                    First name:
                </td>

                <td>
                    <input type = "text" name = "strFirstName" id = "strFirstName" />
                </td>
            </tr>

            <tr>
                <td style = "height:40px">
                    Last name:
                </td>

                <td>
                    <input type = "text" name = "strLastName" id = "strLastName"/>
                </td>
            </tr>

            <tr>
                <td style = "height:40px">
                    Contact Email:
                </td>

                <td>
                    <input type = "text" name = "strContactEmail" id = "strContactEmail"/>
                </td>
            </tr>

            <tr>
                <td style = "height:80px">
                    Request:
                </td>

                <td>
                    <input type = "text" name = "strContactEmailText" id = "strContactEmailText" style = "height:200px;width:400px"  />
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type = "submit" name = "buttonsubmit" id = "buttonsubmit" value = "Submit"/>
                </td>
            </tr>

        </table>
    </form>


</body>

</html>



Any ideas as to why these functions are not operating?

Cheers! :)

Is This A Good Question/Topic? 0
  • +

Replies To: functions

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 592
  • Joined: 15-March 14

Re: functions

Posted 07 April 2014 - 01:56 AM

Hi

You had a few errors in your code. I fixed it up for you with some comments.
Personally I don't like pop up alerts, they are a horrible way to interact with the user. You go to the trouble of focusing on the required fields but the alert still forces the user to move the mouse and click. Try to avoid them if you can.

Added spans to show error message next to required fields and where also handy to indicate that they are required.

Changed function to have only one return point and created a var ret to hold the return so that all missing fields can be highlighted rather than one at a time. Again you must minimize user inconvenience.



Added Style in header for error spans.

No need for the onsubmit function to pass the form as you did not need it in your functions.

background-color style should be just background.

Removed the null tests as that will not happen.

You should try and use === instead of == as === checks type as well as value and its considered good practice to avoid bugs (not that important here but just good habits)

if( "12" == 12) // true but different types
...
if( "12" === 12) // false as one is a String and the other a Number
...



Think that's all. Code below is just copy and past from your code as it was, so you should be able to past it right back where it came from. Remove the comments when you are happy as they are not needed.


<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Contact Us</title>
    <script>
        function validateForm () {  // removed the form as not needed
            return validateName();  // ditto
        }

        function validateName () {        // remover argument form not needed
			var fName, lName, ret;        // present function scope vars
            fName = document.getElementById("strFirstName");  // removed the .value so to get just the element
            lName = document.getElementById("strLastName");   // ditto
			ret = true;                   // set the default return value true;
            if ( fName.value === "" ) {   // just check for empty string
				fName.focus();            // set focus
				document.getElementById("errorFName").textContent = "<= Please enter your first name.";
				                          // ^ display the message next to the input makes for a better 
										  // user experience. In the form you can find the new span elements
                fName.style.background = "RosyBrown";  // removed the -color bit
				ret = false;             // don exit here as best to show all problems with the form
            }
            if ( lName.value === "" ) {
                lName.style.background = "RosyBrown";   // removed the -color bit
				document.getElementById("errorLName").textContent = "<= Please enter your last name.";
				if ( ret ) {            // only if the first name did not need attention
					lName.focus();      // focus on this one
					ret = false;
				}
            }
            return ret;				// return true or false;
        }
    </script>

<style> 
/* style for error report */
span.error {
color:red;
}	
span.errorHelp {
color: #F00;
float: right;
}	
</style>
</head>

<body style = "background-color:#a7aeb4">
<h1 align = "center">Contact Us</h1>
	<!-- removed passing on the form in the onsubmit as it is not needed -->
    <form name = "contactForm" onsubmit = "return validateForm();" style = "background:#a7aeb4">
        <table style = "margin-left:auto;margin-right:auto ; background-color:#e0e6eb;height:40px">
            <tr style = "background-color:#c3cfda;height:40px"> <th colspan = "2"> <strong>Use this form to contact us and we will get back to you within 12 hours</strong></th></tr>

            <tr>
                <td style = "height:40px">
                    First name:
                </td>

                <td> <!-- Added validation error span -->
                    <input type = "text" name = "strFirstName" id = "strFirstName" /><span class='error' id="errorFName">*</span>
                </td>
            </tr>

            <tr>
                <td style = "height:40px">
                    Last name:
                </td>

                <td><!-- Added validation error span -->
                    <input type = "text" name = "strLastName" id = "strLastName"/><span class='error' id="errorLName">*</span>
                </td>
            </tr>

            <tr>
                <td style = "height:40px">
                    Contact Email:
                </td>

                <td>
                    <input type = "text" name = "strContactEmail" id = "strContactEmail"/>
                </td>
            </tr>

            <tr>
                <td style = "height:80px">
                    Request:
                </td>

                <td>
                    <input type = "text" name = "strContactEmailText" id = "strContactEmailText" style = "height:200px;width:400px"  />
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type = "submit" name = "buttonsubmit" id = "buttonsubmit" value = "Submit"/> <span class="errorHelp">(*) required fields</span>

                </td>
            </tr>

        </table>
    </form>

</body>

</html>



Was This Post Helpful? 0
  • +
  • -

#3 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: functions

Posted 07 April 2014 - 02:33 AM

First and foremost, take these advices :

Never use the same value in a name and in an id attribute. Don't ask me why, I don't remember exactly, but I do remember having wasted hours on this with Internet Explorer, so you have the choice : don't give your inputs an id at all (since you can select them via form.yourInputName anyway, but you won't be able to use a label with the for attribute), or use some prefix/suffix in the id.

Don't mix multiple selection methods for the same elements : once you use getElementById, once you use form.yourInputName. It's confusing.

Remember you can store a reference to an element in a variable and reuse it later. It doesn't hep to directly access your input's value via document.getElementById("yourInputId").value because you cannot reuse the reference later.

In the following check if(fName == "" || fName == null) the second statement is useless since fName is a string and will at least be empty, but not null.


You should have located your mistake by now : when you write fName.style.backgroundColor you try to access the style property of the input's value and not the input's element. It's not a big mistake but it is due to your lack of rigour in the way you manage element selections.



I forgot that you could have merged your validateForm and validateName functions. It's more obvious in Blindman's code

This post has been edited by ge∅: 07 April 2014 - 02:40 AM

Was This Post Helpful? 0
  • +
  • -

#4 felgall  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 148
  • Joined: 22-February 14

Re: functions

Posted 07 April 2014 - 12:36 PM

View Postge∅, on 07 April 2014 - 07:33 PM, said:

Never use the same value in a name and in an id attribute. Don't ask me why, I don't remember exactly, but I do remember having wasted hours on this with Internet Explorer


That's because IE stores both ids and names in the same area rather than keeping them separate. You can safely give a field the same id and name as long as those are the only references to that value as then the name reference overwrites the id reference with exactly the same value.
Was This Post Helpful? 0
  • +
  • -

#5 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: functions

Posted 07 April 2014 - 01:00 PM

I'm really talking about giving a same name and id to an input element.

If I remember well, I was trying to fill an input type="hidden" with a date set via a jQuery datePicker. The value was accessible via a console.log or alert, but it wasn't sent to the server (I suppose I was submitting the form naturally). I was incapable of understanding what was happening until I tried hopelessly to rename the id.

It was long ago. I'm not totally sure of how to reproduce the problem.

This post has been edited by ge∅: 07 April 2014 - 01:12 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1