Form Validation- html and javascript

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>


console.log(isbn)

var isbn = document.forms["sellForm"]["isbn"];

var isbn = document.forms["sellForm"]["isbn"].value;

isbn

console.log(isbn)

onsubmit="return formValidation()"

3 Answers
3

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

return

onsubmit

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

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.

isbn.value.length

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()".

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>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.