javascript simple validation not working?

Question

does anyone know why this simple javascript isn't working? it should change the css of the class "t1" from display:none to display: inline to make it appear when the input is empty onSubmit

I just can't understand why it doesnt work?

Thank you so much if your can find where the problem is (btw i want to keep this in pure javascript)

Javascript:

function validate () {

if( document.quote.firstname.value == "" )

{document.getElementByClassName('t1').style = 'display: inline;';
   }

}

HTML:

<form name="quote" method="post" action="" onSubmit="validate();">

<fieldset>
<legend>Contact Information</legend>

<div>
<label>*First Name:</label><span class="t1">Please enter your name</span>
<input name="firstname" type="text"/>
</div>

</fieldset>

<div id="f-submit">
<input name="Submit" value="Submit" type="submit"/>
</div>

</form>

CSS:

.t1{
display: none;
font-size:13px;
color: #F33;
text-align: right;
}

Samuel Reid · Accepted Answer · 2013-06-19 21:07:21Z

1

Suggestion 1: Put ID attributes in the tags so you can access them easier

Suggestion 2: Make the onsubmit attribute be onsubmit="return validate()"

Suggestion 3: getElementByClassName doesn't exist. getElementsByClassName returns an array, so you have to pick which one, or loop through them. IE, document.getElementsByClassName('t1')[0]

Suggestion 4: Your validate function needs to return false if you want the form to not submit, and true if it should submit.

Javascript:

function validate () {

   if( document.getElementById("firstname").value == "" || document.getElementById("firstname").value == null )
    {
    document.getElementsByClassName('t1')[0].setAttribute('style','display: inline;');
    return false;
   }
  return true;
}

HTML:

<form name="quote" method="post" action="" onSubmit="return validate()">

<fieldset>
<legend>Contact Information</legend>

<div>
<label>*First Name:</label><span class="t1">Please enter your name</span>
<input id="firstname" name="firstname" type="text"/>
</div>

</fieldset>

<div id="f-submit">
<input name="Submit" value="Submit" type="submit"/>
</div>

</form>

answered Jun 19, 2013 at 21:07

Samuel Reid

1,7761 gold badge12 silver badges23 bronze badges

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

1 Comment

Ned Over a year ago

Thankyou, very informative! Thanks for going into so much detail and pointing out about the return false and return true

rgthree · Accepted Answer · 2013-06-19 21:13:23Z

1

There is no document.getElementByClassName. Do you mean, getElementsByClassName? You should also set the display style directly, not through the style attribute. Also, if you need to cancel the form submit, you have to return validate() on the submit, and return false when you want to cancel. I put it in the fiddle as well.

I've made a jsFiddle for you as well: http://jsfiddle.net/rgthree/g4ZvA/2/

<form name="quote" method="post" action="" onSubmit="return validate();">

JS:

function validate () {
  if( document.quote.firstname.value == "" ){
    document.getElementsByClassName('t1')[0].style.display = 'inline';
    return false;  // Return false will cancel the submit, causing the page to not load the form action action
  }
  return true;
}

edited Jun 19, 2013 at 21:13

answered Jun 19, 2013 at 20:53

rgthree

7,28319 silver badges21 bronze badges

4 Comments

rgthree Over a year ago

I expanded it, you should set display like: .style.display = 'inline'; instead of setting the style property. You're also not canceling your event. You should cancel the default or return false. I assume you're handling that elsewhere since that was not part of your question.

Ned Over a year ago

Thanks, i missed out the s Your solution does work except it only flickers on and doesn't stay visible?

rgthree Over a year ago

@Ned Yeah, check the fiddle. The form submits itself. I fixed it in the fiddle. I can update the answer, I just assumed you were already cancelling the form somewhere else (your question wasn't about stopping the form from submitting). I'll update it

Ned Over a year ago

Thankyou! Especially for the jsfiddle as it made it easy to understand and for pointing out that it's document.getElementsByClassName

Collectives™ on Stack Overflow

javascript simple validation not working?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related