Проверка формы - HTML и JavaScript

Question

Я относительно новичок в кодировании - работаю над проверкой формы и не могу заставить страницу фактически возвращать false (не отправлять форму, если пользователь вводит неправильную длину isbn) с моей функцией formValidation. Интересно, что мне здесь не хватает.

Появляется предупреждение, и форма отправляется независимо от того, какой isbn.length, но если это правильная длина, она добавляется в базу данных и перенаправляется на домашнюю страницу. Если это не правильная длина, он направляется в "Эта страница не работает localhost не отправил никаких данных. 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>

соответствующий 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>

Answer 1

У вас есть другие проблемы (см. ответ Андре ), но вам нужно добавить return как часть onsubmit атрибута

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

Полная версия

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>

Answer 2

Вам нужно проверить длину значения поля ввода isbn, а в теге формы вам нужно получить возвращение функции formValidation в обработчике onsubmit следующим образом: 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>

Answer 3

Возможно, вам потребуется проверить isbn.value следующим образом:

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;
  }
}

Затем добавьте логику по желанию.