Issues with JavaScript Form Validation

Question

I am trying to do Form validation to validate the information request form by checking that the following fields in the form have been filled out:

▪ Name field
▪ Email field
▪ Comments

My function validateName() does not work at all it causes the other functions not to work either (adding default values to fields and removal of defaults when text area is clicked). When I remove the validateName() the functions I previously created work fine. It should be noted that I have addded the onsubmit="return validateName()" to the form element. I will also need to create a validateEmail() and validateComments() respectively.

I would also like the function for validateName(), validateEmail(), and validateComments() validation to check the following:

▪ Check if the form field is empty when submitted ▪ Check if the default text is in the form field when submitted

I have commented out the 2 validateName() functions I attempted to use so my other functions will work.

    function formtext(){
        document.contact.Name.value="Enter your name.";
        document.contact.Email.value="Enter your email address.";
        document.contact.questions.value="Enter your comments.";
    }
    function delete_email(){
        document.contact.Email.value = "";
    }
    function delete_name(){
        document.contact.Name.value = "";
    }
    function delete_comments(){
        document.contact.questions.value = "";
    }

   /* function validateName()
    {
        var x=document.contact.Name.value;
        if (x==null || x=="")

        {
            alert("Name must be filled out");
            return false;
        }
    }  */

    /* function validateName()
    {
        var x=document.contact.["Name"].value;
        if (x==null || x=="")
        {
            alert("Name must be filled out");
            return false;
        }
    }    */

</script>

Try giving an id attribute to each of the fields and use if(document.getElementById('nameField').value == '') I'll try creating a fiddle and post the link here — Harsha Venkataramu
– Harsha Venkataramu, Commented May 26, 2013 at 17:23
@user2422696 : If you get stuck somewhere , post it, we'll be glad to help.Good Luck :-) — Harsha Venkataramu
– Harsha Venkataramu, Commented May 26, 2013 at 17:48

Sebas · Accepted Answer · 2013-05-26 18:38:03Z

1

var defaultName == 'Please Enter Name', defaultEmail == 'Please Enter Email', defaultComment == 'Please Enter Comment';
function validateForm()
    {
        if(document.getElementById('namefield').value == '' || (document.getElementById('namefield').value == defaultName)
        {
            alert('Please enter name'); 
        }
        if(document.getElementById('emailfield').value == '' || (document.getElementById('emailfield').value == defaultEmail)
        {
            alert('Please enter email');    
        }
        if(document.getElementById('commentsfield').value == '' || (document.getElementById('commentsfield').value == defaultComment)
        {
            alert('Please enter comments'); 
        }
    }

edited May 26, 2013 at 18:38

Sebas

21.6k9 gold badges60 silver badges109 bronze badges

answered May 26, 2013 at 17:44

Harsha Venkataramu

2,9121 gold badge37 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Harsha Venkataramu Over a year ago

I am sorry.Copy pasting from dreamweaver is removing all formatting

aplata Over a year ago

I am thinking for the requirement "Check if the default text is in the form field when submitted" I could add an or condition to lets after value == but how can I make reference to the to the text? It exists within my function below so I thinking I will need to create a variable. Any ideas? function formtext(){ document.contact.Name.value="Enter your name."; document.contact.Email.value="Enter your email address."; document.contact.questions.value="Enter your comments."; }

Harsha Venkataramu Over a year ago

@aplata : Define variables in JavaScript initially as var defaultName = 'Enter your name here' . Then , you can perform a check like if(document.getElementById('nameField').value == '' || document.getElementById('nameField').value == defaultName)

aplata Over a year ago

Sorry harsha what you provided worked. I am just trying to figure out how I can check if the default text is in the form field when submitted which was my last comment. Thanks

Harsha Venkataramu Over a year ago

@aplata : Please take a look at the edited answer,it takes care of the default name in the form field check.Also, if my answer helped you , please consider accepting it as the answer,

|

Collectives™ on Stack Overflow

Issues with JavaScript Form Validation

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related