I need to customize the bootstrap form validation according to my requirements. Here is the HTML of my form.
<form class="main-form bg-white needs-validation" novalidate action="submit-sell.php" enctype="multipart/form-data" method="POST" id="sellingForm">
<input name="ProductName" type="text" class="form-control" id="name" placeholder="Samsung mobile phone" required>
<div class="invalid-feedback">
Please provide a valid title
</div>
<input name="contactNumber" type="tel" maxlength="10" class="form-control" id="contact" placeholder="0777123456" required>
<div class="invalid-feedback">
Please provide a valid contact no
</div>
<input name="password" type="password" class="form-control" id="password" required>
<div class="invalid-feedback">
Please provide a valid password
</div>
<input name="repeatPassword" type="password" class="form-control" id="repeatPassword" required>
<div class="invalid-feedback">
Passwords did not match
</div>
<select class="form-control" id="category" onchange="selectCategory(event)" name="category" required>
<option value="" selected disabled>Select a category</option>
<option value="sell_vehicle">Sell Vehicle</option>
<option value="computer">Computers</option>
<option value="mobile">Mobile Phones</option>
<!--Further options-->
</select>
<div class="invalid-feedback">
Please select a category
</div>
<input required name="price" type="text" class="form-control" id="price" placeholder="120 000" required>
<div class="invalid-feedback">
Please provide a valid price
</div>
<input required class="form-check-input" type="radio" name="negotiablity" id="negotiable" value="1">
<label class="form-check-label">Negotiable </label>
<input required class="form-check-input" type="radio" name="negotiablity" id="not_negotiable" value="0">
<label class="form-check-label">Not Negotiable</label>
<textarea required name="description" rows="5" class="form-control" aria-label="With textarea" placeholder="Enter the product description here"></textarea>
<div class="invalid-feedback">
Please provide a valid description
</div>
<input type="file" name="image" class="custom-file-input" id="file-input" required multiple name="picture">
<div class="invalid-feedback">
Please select a valid image
</div>
<button class="btn btn-primary" type="submit">Post Free Ad</button>
</form>
I have tried to customize the bootstrap JS code given in the documentation.
var form = document.getElementById('sellingForm');
form.addEventListener('submit', function(event) {
const contact = document.getElementById('contact');
if (form.checkValidity() === false) {
if (isNaN(contact.value) || contact.value > 10) {
event.preventDefault();
event.stopPropagation();
}
}
form.classList.add('was-validated');
}, false)
But it doesn't seem to work. The form gets submitted without validating. I need help to validate following and then submit the form only if user input is valid.
- User has filled all the required inputs.
- The product name should not pass more than 25 characters and should not be less than 10 characters.
- The contact number should not be a number and it should not be more or less than 10 numbers.
- I should check whether the entered password and the repeated password are matching
- I should check whether the chosen file is an image(in jpeg/png,etc formats) and whether a minimum of one and maximum of three images are inserted. These are the main solutions I require so I can apply in other areas. No Jquery please ..
required
or have apattern
attribute which check if the values are valid, like a telephone number. Without itform.checkValidity()
check will always be true. – Emiel Zuurbier Oct 21 '20 at 9:46