Form Validation- html and javascript

Question

I'm relatively new to coding- working on form validation and can't get the page to actually return false (not submit the form if the user inputs the incorrect isbn length) with my formValidation function. Wondering what I'm missing here.

The alert pops up and form is submitted no matter what the isbn.length is- however, if it's the correct length, it does get added to the database and is rerouted to the home page. If it's not the right length, it's routed to "This page isn’t working localhost didn’t send any data. ERR_EMPTY_RESPONSE"

Javascript:

//function to validate the form's ISBN number input and ensure it's between 10-14 digits.

function formValidation(){
    var isbn = document.forms["sellForm"]["isbn"];

        if (isbn.length >= 10 && isbn.length <= 14){
         return true;

     }
     else
     {
         alert("Please input a 10-14 digit ISBN number");
         isbn.focus();
         return false;

     }
 }

</script>

corresponding HTML:

<form name="sellForm" method="POST" action="/create" role="form" onsubmit="formValidation()">
              <div class="form-group">
                <label for="role" >ISBN</label>
                <input type="number" size=14 class="form-control" name="isbn" id="role"  required
               placeholder="input the 10-14 digit ISBN number"/>
              </div>

              <div class="form-group">
                  <label for="age">Condition</label>
                                    <br>
   <input type="radio" name="book_condition" value="Very Used"> Very Used<br>
     <input type="radio" name="book_condition" value="Lightly Used"> Lightly Used<br>
     <input type="radio" name="book_condition" value="Like New"> Like New
                  </div>
              </div>

              <div class="form-group">
                <label>Price</label>
                <input type="number" class="form-control" name="price" required
                                placeholder="input whole dollar price">
              </div>

              <button type="submit" class="btn btn-primary btn-md" id="add-btn">
                                <span class="fa fa-fire"></span> Sell</button>

            </form>

Do you hit the alert? Any console errors (hit F12 to bring up browser tools then go to the "Console" tab)? — Jon P
– Jon P, Commented Sep 5, 2018 at 0:05
What does console.log(isbn) tell you when placed right after you set that variable? Is it defined? Also, "10-12 digits", or "10-14"? Alert msg says one, code & placeholder text say the other. — mc01
– mc01, Commented Sep 5, 2018 at 0:11
a. you should changevar isbn = document.forms["sellForm"]["isbn"]; to var isbn = document.forms["sellForm"]["isbn"].value; b. and, you should debug the isbn value. in web browser, hit f12 to go to "Console tab", type like console.log(isbn). c. onsubmit="return formValidation()". — Eric
– Eric, Commented Sep 5, 2018 at 0:21

null · Accepted Answer · 2018-09-05 00:20:06Z

1

You might need to check isbn.value like this:

function formValidation(){
  var isbn = document.forms["sellForm"]["isbn"];

  if (isbn.value >= 10 && isbn.value <= 14) {
       return true;
  } else {
       alert("Please input a 10-12 digit ISBN number");
       isbn.focus();
       return false;
  }
}

Then add the logic as desired.

edited Sep 5, 2018 at 0:20

null

1,1723 gold badges13 silver badges30 bronze badges

answered Sep 5, 2018 at 0:15

Andre Gamboa

641 silver badge8 bronze badges

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

5 Comments

null Over a year ago

I think he is not checking the value but the length if the length is between 10 and 14.

Andre Gamboa Over a year ago

The html control is a numeric control, base on the isbn number, I think is not the length what was trying to check.

Andre Gamboa Over a year ago

It works for me, could you explain more what you are trying to accomplish in order to send you a full example.

ThS Over a year ago

@AndreGamboa Your answer seems to be incorrect. You must check the value's length like this: isbn.value.length. See my answer it contains a runnable snippet.

Andre Gamboa Over a year ago

I see what you are saying, you are correct, it should be isbn.value.length

ThS · Accepted Answer · 2018-09-05 00:22:27Z

You need to check for the isbn input field value's length, and in the form tag you need to get the formValidation function's return in the onsubmit handler like this: onsubmit="return formValidation()".

function formValidation(){
    var isbn = document.forms["sellForm"]["isbn"];
        // check for the input field value's length
        if (isbn.value.length >= 10 && isbn.value.length <= 14){
         return true;

     }
     else
     {
         alert("Please input a 10-12 digit ISBN number");
         isbn.focus();
         return false;

     }
 }

<form name="sellForm" method="POST" action="/create" role="form" onsubmit="return formValidation()">
              <div class="form-group">
                <label for="role" >ISBN</label>
                <input type="number" size=14 class="form-control" name="isbn" id="role"  required
               placeholder="input the 10-14 digit ISBN number"/>
              </div>

              <div class="form-group">
                  <label for="age">Condition</label>
                                    <br>
   <input type="radio" name="book_condition" value="Very Used"> Very Used<br>
     <input type="radio" name="book_condition" value="Lightly Used"> Lightly Used<br>
     <input type="radio" name="book_condition" value="Like New"> Like New
                  </div>
              </div>

              <div class="form-group">
                <label>Price</label>
                <input type="number" class="form-control" name="price" required
                                placeholder="input whole dollar price">
              </div>

              <button type="submit" class="btn btn-primary btn-md" id="add-btn">
                                <span class="fa fa-fire"></span> Sell</button>

            </form>

Jon P · Accepted Answer · 2018-09-05 01:59:28Z

You have other issues (see Andre's answer) but you need to add return as part of the onsubmit attribute

<form name="sellForm" method="POST" action="/create" role="form" onsubmit="return formValidation();">

The Full Version

function formValidation() {  
  /*This is the form element*/ 
  var isbnEl = document.forms["sellForm"]["isbn"];
  var isbn = isbnEl.value;
  
  /*The following 2 lines are for demonstration only and can be removed*/
  console.log(isbnEl);
  console.log(isbn);
  
  if (isbn.length >= 10 && isbn.length <= 14) {
    return true;

  } else {
    alert("Please input a 10-12 digit ISBN number");
    isbnEl.focus();
    return false;
  }
}

<form name="sellForm" method="POST" action="/create" role="form" onsubmit="return formValidation()">
  <div class="form-group">
    <label for="role">ISBN</label>
    <input type="number" size=14 class="form-control" name="isbn" id="role" required placeholder="input the 10-14 digit ISBN number" />
  </div>

  <div class="form-group">
    <label for="age">Condition</label>
    <br>
    <input type="radio" name="book_condition" value="Very Used"> Very Used<br>
    <input type="radio" name="book_condition" value="Lightly Used"> Lightly Used<br>
    <input type="radio" name="book_condition" value="Like New"> Like New
  </div>
  <!--</div> <---- This is an orphan tag, remove it -->

  <div class="form-group">
    <label>Price</label>
    <input type="number" class="form-control" name="price" required placeholder="input whole dollar price">
  </div>

  <button type="submit" class="btn btn-primary btn-md" id="add-btn">
                                <span class="fa fa-fire"></span> Sell</button>

</form>

Collectives™ on Stack Overflow

Form Validation- html and javascript

3 Answers 3

5 Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

Comments

Related