I created a form for Validation But Only the Author Name is getting Validated and rest of other input field is getting submitted without getting validation
I tried giving name to form and retrieving the values from it but it doesn’t seem to work. I created a seperate file for JavaScript and JSP Page
The Below One is HTML Form
<form method="post" class="form-custom" onsubmit="return validateForm()" action="../AddProducts">
<div class="row">
<div class="col">
<label for="bname">Book Name</label>
<input type="text" class="form-control" id="bname" placeholder="Enter Book name" name="bname">
<p class="error" id="error_name"></p>
</div>
<div class="col">
<label for="authorname">Author Name</label>
<input type="text" class="form-control" id="author" name="author" placeholder="Enter Author name">
<p class="error" id="error_author"></p>
</div>
</div>
<div class="row">
<div class="col">
<label for="bname">Price</label>
<input type="text" class="form-control" id="price" name="price" placeholder="Enter Price" >
<p class="error" id="error_price"></p>
</div>
<div class="col">
<label for="authorname">Quantity</label>
<input type="text" class="form-control" id="qty" name="qty" placeholder="Enter Qty" >
<p class="error" id="error_qty"></p>
</div>
<div class="col">
<label for="authorname">Select Category</label>
<select class="custom-select" id="inputGroupSelect01">
<option selected value="-1">Choose...</option>
<c:forEach var="r" items="${rs.rows}">
<option value="${r.category}">${r.category}</option>
</c:forEach>
</select>
<p class="error" id="error_select"></p>
</div>
<div class="col">
<label>Choose Book Image</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01" id="custom-label">Choose file</label>
<p class="error" id="error_file"></p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="desc">Description</label>
<textarea class="form-control customtxt" id="desc" rows="4"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<input type="submit" value="Save" class="btn custombtn m-2"/>
<input type="reset" value="Clear" class="btn custombtn m-2"/>
</div>
</div>
</form>
Below is the JavaScript Validation Function()
function validateForm()
{
var author=document.getElementById('author').value;
var price=document.getElementById('price').value;
var qty=document.getElementById('qty').value;
var bname=document.getElementById("bname");
var c=document.getElementById('inputGroupSelect01');
var cat=c.options[c.selectedIndex].value;
var filepath=document.getElementById("inputGroupFile01").value;
var allowedExtension=/(.jpg|.jpeg|.png|.gif)$/i;
if(!author.match(/[A-z]+$/))
{
document.getElementById('error_author').innerHTML="*Please Enter Valid Author Name!";
document.getElementById('author').focus();
return false;
}
else if(!bname.match(/[A-z]+$/))
{
document.getElementById('error_name').innerHTML="*Please Enter Valid Book Name";
document.getElementById('bname').focus();
return false;
}
else if(!price.match(/^d+(?:[.,]d+)*$/))
{
document.getElementById('error_price').innerHTML="*Please Enter Valid Price!";
document.getElementById('price').focus();
return false;
}
else if(!qty.match(/^[0-9]+$/))
{
document.getElementById('error_qty').innerHTML="*Please Enter Valid Quantity!";
document.getElementById('qty').focus();
return false;
}
else if(cat===-1)
{
document.getElementById('error_select').innerHTML="*Please Select a Category!";
return false;
}
else if(filepath==="")
{
document.getElementById('error_file').innerHTML="*Please Upload Image!";
filepath.value="";
return false;
}
//exec -> search for the particular word is there or not
else if(!allowedExtension.exec(filepath))
{
document.getElementById('error_file').innerHTML="*Please Upload Valid Image!";
filepath.value="";
return false;
}
else
{
return true;
}
}