0

I'm trying to create a simple HTML form & i want to use javascript to validate the values.
Here's the form tage:

<form action="" onSubmit="return formValidation();" method="Post" name="form">

Here's a part of the HTML form:

<label for="text">my text:</label>
<input type="text" name="text">
<div id="error"></div>
<input type="submit" value="submit">

& here's the formValidation() function:

function formValidation() {
   var mytext=document.form.text;
   if (textValidation(mytext, 3, 20)) {

   }
   return false;
}

& here's the textValidation() code:

function textValidation(txt, mn, mx) {
     var txtlen = txt.value.length;
     if (textlen == 0 || txtlen <=mn || txtlen > mx ) {
           document.getElementById('error').innerHTML = '<h6 style="color: red;">text is invalid</h6>';
            return false;
            }
      return true;
}

The problem is when i enter an invalid text, it shows the error but hitting the submit button again has no effect, even if i change the text.
i've used alert() & it worked fine.
what am i doing wrong?

3
  • any error in console ?? Commented Jul 12, 2015 at 3:48
  • 1
    What are you expecting to happen? You don't have an else statement to remove the error, and the return false in your form validate function stops the procedure when the form has no errors
    – Graham T
    Commented Jul 12, 2015 at 3:55
  • @GrahamT where and how do i place the else statement? can you explain more in an answer?
    – marc_s
    Commented Jul 12, 2015 at 4:04

3 Answers 3

2

You're setting the error text but you don't clear it so it just sticks around. Also, you have to return true in the if statement on your formValidation function otherwise it will always return false.

You can clear the message like this:

function textValidation(txt, mn, mx) {
  var txtlen = txt.value.length;
  if (textlen == 0 || txtlen <=mn || txtlen > mx ) {
    document.getElementById('error').innerHTML = '<h6 style="color: red;">text is invalid</h6>';
    return false;
  }
  document.getElementById('error').innerHTML = "";
  return true;
}

Since formValidation always returns false, it will never allow the form to submit. That's fine for testing your JS, but later you'll want to use something like this:

function formValidation() {
  var mytext=document.form.text;
  if (textValidation(mytext, 3, 20)) {
    return true;
  }
  return false;
}
1
  • How is that done? can you correct my code & show it to me so i can understand?
    – marc_s
    Commented Jul 12, 2015 at 3:59
1

You can write the form validate function like this

function formValidation() {
var mytext=document.form.text;
//if the variable boolval is initialized inside double quotes it is string now it is bool variable
var boolval=false; 
if (textValidation(mytext, 3, 20)) {
boolval=true;
}
return boolval;
}

if textvalidation is true then it will initialize true to boolval or this function will return boolval false as we initialized before[which is default]

0
1

Your function formValidation() is always going to return false, regardless of the result of your conditional statement.

Consider your code, corrected in some ways:

function formValidation() {
   var mytext=document.form.text;
   if (textValidation(mytext, 3, 20)) {

   }
   return false;
}

If the function textValidation(mytext, 3, 20) is false, formValidation() returns false. If textValidation(mytext, 3, 20) is true, well... the body of the if statement executes, which is empty, and then formValidation returns false.

Additionally, there are also a number of mismatched parentheses and other syntax related issues in your code. Since Javascript is inherently flexible, you might miss these things in practice. I suggest using JSHint to validate and improve the general quality and design of your Javascript code.

3
  • what should i put in the body of the if statement?
    – marc_s
    Commented Jul 12, 2015 at 4:00
  • 2
    How about function formValidation() { var mytext=document.form.text; return textValidation(mytext, 3, 20); } Commented Jul 12, 2015 at 4:10
  • 1
    @analytalica raises a good point which will actually help keep things concise if you want to expand to include additional validation functions in which case you could just && the additional functions. I.E. function formValidation() { var mytext=document.form.text; return textValidation(mytext, 3, 20) && otherValidation(otherInput) && ...; } Commented Jul 12, 2015 at 4:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.