How to call my function in Bootstrap Checkout example? - javascript

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation')
// Loop over them and prevent submission
Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
}, false)
}())
// Where do I have to call myfunction?
function myFunction (){
alert('All Values are valid');
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h2>Checkout form</h2>
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge badge-secondary badge-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">-$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
</div>
</form>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback" style="width: 100%;">
Your username is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you#example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country">Country</label>
<select class="custom-select d-block w-100" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<select class="custom-select d-block w-100" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="same-address">
<label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">Save this information for next time</label>
</div>
<hr class="mb-4">
<h4 class="mb-3">Payment</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
<label class="custom-control-label" for="credit">Credit card</label>
</div>
<div class="custom-control custom-radio">
<input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="debit">Debit card</label>
</div>
<div class="custom-control custom-radio">
<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2017-2019 Company Name</p>
<ul class="list-inline">
<li class="list-inline-item">Privacy</li>
<li class="list-inline-item">Terms</li>
<li class="list-inline-item">Support</li>
</ul>
</footer>
</div>
Hello!
I try to call my function in the Bootstrap example "Checkout" example when all necessary input fields are ok.
But I don't understand where I have to call myfunction in the bootstrap example javascript code.
Myfunction should be called when all nessesary fields are ok and the form should be send.
See the code snippet below.
Thanks for your help!

Related

in multi step form radio button validation

I am trying to use validations in my multi step form, when I am using validations, it works fine with input fields in last step but the problem is that, in first and last step I am using radio options and I am trying to use validation there so that without selecting any option one cannot move to next step.
var currentTab=0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x=document.getElementsByClassName("tab");
x[n].style.display="block";
//... and fix the Previous/Next buttons:
if(n==0) {
document.getElementById("prevBtn").style.display="none";
}
else {
document.getElementById("prevBtn").style.display="inline";
}
if(n==(x.length-1)) {
document.getElementById("nextBtn").innerHTML="Submit";
}
else {
document.getElementById("nextBtn").innerHTML="Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x=document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if(n==1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display="none";
// Increase or decrease the current tab by 1:
currentTab=currentTab+n;
// if you have reached the end of the form...
if(currentTab>=x.length) {
// ... the form gets submitted:
document.getElementById("bookingForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, z, i, n, valid=true;
x=document.getElementsByClassName("tab");
y=x[currentTab].querySelectorAll('input');
// A loop that checks every input field in the current tab:
for(i=0; i<y.length; i++) {
// If a field is empty...
if(y[i].value=="") {
// add an "invalid" class to the field:
y[i].className+=" invalid";
// and set the current valid status to false
valid=false;
}
}
// If the valid status is true, mark the step as finished and valid:
if(valid) {
document.getElementsByClassName("step")[currentTab].className+=" finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x=document.getElementsByClassName("step");
for(i=0; i<x.length; i++) {
x[i].className=x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className+=" active";
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<form id="bookingForm" autocomplete="off" name="form">
<!-- One "tab" for each step in the form: -->
<div class="tab">
<h3>Add Pet Details</h3>
<label class="ml-4 mt-2">What type of pet?</label>
<div class="row m-2">
<div class="col-md-3 mb-3 radio-toolbar">
<input type="radio" id="cat" class="form-control" value="Cat" name="type">
<label for="cat" class="form-label">Cat</label>
</div>
<div class="col-md-3 mb-3 radio-toolbar">
<input type="radio" id="dog" class="form-control" value="Dog" name="type">
<label for="dog" class="form-label">Dog</label>
</div>
</div>
<div class="row m-2">
<div class="col-md-6 mb-3">
<label class="mt-2 mb-3" for="breed">Breed of your pet?</label>
<input type="text" class="form-control" id="breed" placeholder="Please enter your pet's breed...">
</div>
</div>
<label class="ml-4 mt-2">Gender of your pet?</label>
<div class="row m-2">
<div class="col-md-3 mb-3 radio-toolbar">
<input type="radio" class="form-control" value="Male" id="male" name="gender">
<label for="male" class="form-label">Male</label>
</div>
<div class="col-md-3 mb-3 radio-toolbar">
<input type="radio" id="female" class="form-control" value="Female" name="gender">
<label for="female" class="form-label">Female</label>
</div>
</div>
<label class="ml-4 mt-2">Size of your pet?</label>
<div class="row m-2">
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="small" name="size" class="form-control" value="Small">
<label for="small" class="form-label">Small</label>
</div>
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="medium" name="size" class="form-control" value="Medium">
<label for="medium" class="form-label">Medium</label>
</div>
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="large" name="size" class="form-control" value="Large">
<label for="large" class="form-label">Large</label>
</div>
</div>
<label class="ml-4 mt-2">How Aggressive is your pet?</label>
<div class="row m-2">
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="low" name="aggression" class="form-control" value="Low">
<label for="low" class="form-label">Low</label>
</div>
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="normal" name="aggression" class="form-control" value="Normal">
<label for="normal" class="form-label">Normal</label>
</div>
<div class="col-md-4 mb-3 radio-toolbar">
<input type="radio" id="high" name="aggression" class="form-control" value="High">
<label for="high" class="form-label">High</label>
</div>
</div>
</div>
<div class="tab">
<h3>Please Enter your Personal Details.</h3>
<div class="row m-2">
<div class="col-md-6">
<label class="mt-2 mb-3" for="fname">Your Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Please enter your full name...">
</div>
<div class="col-md-6">
<label class="mt-2 mb-3" for="email">Your Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Please enter your email id...">
</div>
</div>
<div class="row m-2">
<div class="col-md-12">
<label class="mt-2 mb-3" for="location">Search Your Society/Locality</label>
<input type="text" class="form-control" id="location" placeholder="Please search your location here...">
</div>
</div>
<div class="row m-2">
<div class="col-md-6">
<label class="mt-2 mb-3" for="address">House/Flat No.</label>
<input type="text" class="form-control" id="address" placeholder="Please enter your address...">
</div>
<div class="col-md-6">
<label class="mt-2 mb-3" for="city">city</label>
<input type="text" class="form-control" id="city" placeholder="Please enter your City Name...">
</div>
</div>
<div class="row m-2">
<div class="col-md-6">
<label class="mt-2 mb-3" for="state">State</label>
<input type="text" class="form-control" id="state" placeholder="Please enter your State Name...">
</div>
<div class="col-md-6">
<label class="mt-2 mb-3" for="contact">Your Contact Number</label>
<input type="text" class="form-control" id="contact" placeholder=" Please enter your valid contact number...">
</div>
</div>
<div class="row m-2">
<div class="col-md-12">
<label class="mt-2 mb-3" for="msg">Additional Note for Groomer(optional)</label>
<textarea class="form-control" id="msg" rows="3"></textarea>
</div>
</div>
</div>
<div class="tab">
<div class="row m-2">
<div class="col-md-6">
<label class="mt-2 mb-3" for="date">Select Date</label>
<input type="date" name="bday" min="1000-01-01" max="3000-12-31"
class="form-control" placeholder="dd-mm-yyyy">
</div>
</div>
<div class="row m-2">
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-1" name="time" class="form-control" value="09:00 to 11:00 AM">
<label for="time-1" class="form-label">09:00 to 11:00 AM</label>
</div>
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-2" name="time" class="form-control" value="11:00 to 01:00 PM">
<label for="time-2" class="form-label">11:00 to 01:00 PM</label>
</div>
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-3" name="time" class="form-control" value="01:00 to 03:00 PM">
<label for="time-3" class="form-label">01:00 to 03:00 PM</label>
</div>
</div>
<div class="row m-2">
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-4" name="time" class="form-control" value="03:00 to 05:00 PM">
<label for="time-4" class="form-label">03:00 to 05:00 PM</label>
</div>
<div class="col-md-4 mt-3 radio-toolbar">
<input type="radio" id="time-5" name="time" class="form-control" value="05:00 to 07:00 PM">
<label for="time-5" class="form-label">05:00 to 07:00 PM</label>
</div>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
</div>

Could you use required on the radio tag? Like this:
<input type="radio" id="cat" class="form-control" value="Cat" name="type" required>

JavaScript Form Values

My name is Alexandru! I am trying to learn javascript. I am using MDB and Bootstrap, and while using one of MDB's form examples I encountered a problem. My JavaScript won't show the exact answers from the form, but the following answer. Thank you in advance!
Thank you!
Answer:
[object NodeList]
[object NodeList]
[object NodeList]
[object NodeList]
[object NodeList]
[object NodeList]
function results() {
var fistName = document.getElementsByName('firstName');
var lastName = document.getElementsByName('lastName');
var birth_date = document.getElementsByName('birth_date');
var email = document.getElementsByName('email');
var telehpone = document.getElementsByName('telehpone');
var message = document.getElementsByName('message');
document.write("<h1>Thank you!</h1>");
document.write("<h3>Answer:</h3>")
document.write(fistName + "<br/>");
document.write(lastName + "<br/>");
document.write(birth_date + "<br/>");
document.write(email + "<br/>");
document.write(telehpone + "<br/>");
document.write(message + "<br/>");
}
<section class="intro">
<div class="mask d-flex align-items-center h-100 gradient-custom">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2">Formular de Contact</h3>
<form onsubmit="return results()">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" name="Name" id="firstName" class="form-control" />
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" name="lastName" id="lastName" class="form-control" />
<label class="form-label" for="Prenume">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline datepicker">
<input type="text" name="birth_date" class="form-control" id="birthdayDate" />
<label for="birthdayDate" class="form-label">Birth Date</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">Gender: </h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="femaleGender" value="option1" />
<label class="form-check-label" for="femaleGender">F</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender" value="option2" />
<label class="form-check-label" for="maleGender">M</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="otherGender" value="option3" />
<label class="form-check-label" for="otherGender">N</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="email" name="email" id="emailAddress" class="form-control" />
<label class="form-label" for="emailAddress">Email</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="tel" name="telehpone" id="phoneNumber" class="form-control" />
<label class="form-label" for="phoneNumber">Telephone Number</label>
</div>
</div>
</div>
<div class="form-outline">
<textarea class="form-control" name="message" id="textAreaExample" rows="4"></textarea>
<label class="form-label" for="textAreaExample">Message</label>
</div>
<div class="mt-4">
<input id="button-submit" name="submit_button" class="btn btn-warning btn-lg" type="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

You should be using .value and also selecting only one from the list (say using [0])! Also, return false, else it will refresh. See below:
function results() {
var fistName = document.getElementsByName("Name")[0].value;
var lastName = document.getElementsByName("lastName")[0].value;
var birth_date = document.getElementsByName("birth_date")[0].value;
var email = document.getElementsByName("email")[0].value;
var telehpone = document.getElementsByName("telehpone")[0].value;
var message = document.getElementsByName("message")[0].value;
document.write("<h1>Thank you!</h1>");
document.write("<h3>Answer:</h3>");
document.write(fistName + "<br/>");
document.write(lastName + "<br/>");
document.write(birth_date + "<br/>");
document.write(email + "<br/>");
document.write(telehpone + "<br/>");
document.write(message + "<br/>");
return false;
}
<section class="intro">
<div class="mask d-flex align-items-center h-100 gradient-custom">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2">Formular de Contact</h3>
<form onsubmit="return results()">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" name="Name" id="firstName" class="form-control" />
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" name="lastName" id="lastName" class="form-control" />
<label class="form-label" for="Prenume">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline datepicker">
<input type="text" name="birth_date" class="form-control" id="birthdayDate" />
<label for="birthdayDate" class="form-label">Birth Date</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">Gender:</h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="femaleGender" value="option1" />
<label class="form-check-label" for="femaleGender">F</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender" value="option2" />
<label class="form-check-label" for="maleGender">M</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="otherGender" value="option3" />
<label class="form-check-label" for="otherGender">N</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="email" name="email" id="emailAddress" class="form-control" />
<label class="form-label" for="emailAddress">Email</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="tel" name="telehpone" id="phoneNumber" class="form-control" />
<label class="form-label" for="phoneNumber">Telephone Number</label>
</div>
</div>
</div>
<div class="form-outline">
<textarea class="form-control" name="message" id="textAreaExample" rows="4"></textarea>
<label class="form-label" for="textAreaExample">Message</label>
</div>
<div class="mt-4">
<input id="button-submit" name="submit_button" class="btn btn-warning btn-lg" type="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

jquery- how to validate each page of tab for form?

I have a form that looks like this:
I want every input to be mandatory and requires user to enter before proceeding to the next tab,by click the next button. I implemented the jquery validation plugin and it looks like below:
Code:
<form method="POST" action="{{ route('register') }}" id="register-form">
#csrf
<div class="tab-content" id="myTabContent">
<!-- Registration Tab-->
<div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required id="email" placeholder="Email">
</div>
<div class="form-group col-md-12">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" required id="password">
</div>
<div class="form-group col-md-12">
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button" id="next-btn">Next</a>
</div>
</div>
<!-- Information Tab -->
<div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
<!-- Personal Particulars -->
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="full_name">Full Name (as per NRIC)</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="nric">NRIC Number</label>
<input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="address_1">Address Line 1</label>
<input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 2</label>
<input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 3</label>
<input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" placeholder="City">
</div>
<div class="form-group col-md-12">
<label for="state">State</label>
<select name="state" id="state" class="form-control">
<option disabled selected>Choose your state..</option>
#foreach($states as $state)
<option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contact_number_home">Contact Number (Home)</label>
<input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
</div>
<div class="form-group col-md-6">
<label for="contact_number_mobile">Contact Number (Mobile)</label>
<input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
</div>
</div>
<div class="form-row">
<div class="col-12">
<label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
<label class="form-check-label" for="existing_customer">No</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="1">
<label class="form-check-label" for="existing_customer">Yes</label>
</div>
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button">Next</a>
</div>
</div>
<div class="tab-pane fade" id="agreement" role="tabpanel" aria-labelledby="agreement-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Agreement</h5>
<!-- Registration Agreement -->
...............
<div class="row">
<div class="col-12 col-md-8 offset-md-2 pl-3 pr-3 pt-2 mb-0">
<canvas class="display-block signature-pad" style="touch-action: none;"></canvas>
<p id="signatureError" style="color: red; display: none;">Please provide your signature.</p>
<div class="p-1 text-right">
<button id="resetSignature" class="btn btn-sm" style="background-color: lightblue;">Reset</button>
<button id="saveSignature" class="btn btn-sm" style="background-color: #fbcc34;">Save</button>
</div>
<input type="hidden" name="signature" id="signatureInput">
</div>
</div>
<div class="row">
<div class="col-12 mb-0 pt-2">
<!-- Submit Button -->
<div class="text-right">
<input type="hidden" name="registrationFor" value="customer">
<button type="submit" class="bjsh-btn-gold text-right">Sign Up</button>
</div>
</div>
</div>
// Validate each input tab before moving to the next tab
$(document).ready(function() {
$("#register-form").validate({
rules: {
email: "required",
password:"required",
password_confirmation:"required"
},
messages: {
email: "Please enter an email",
password: "Please enter a password",
password_confirmation: "Please confirm your password"
}
})
$('#next-btn').on('click',function() {
$("#register-form").valid();
});
});
I checked my console and there is no error and I implemented the correct library, however I can still proceed to the next button. Why is it not working?

actually error occurs but your form is redirecting to another page so add this
event.preventDefault();
before
$("#register-form").valid();

Unable to get Javascript myFunction() to run var requiredFields = document.getElementById before going to next command

function myFunction() {
var requiredFields = document.getElementById('specialTxtarea');
window.alert('Thank for your Reservation');
window.location = 'index.html';
}
<form>
<div class="form-group row">
<label for="checkin" class="col-2 col-form-label">Check-In</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
<input id="checkin" name="checkin" type="text" class="form-control" required="required" wfd-id="13">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="checkout" class="col-2 col-form-label">Check-Out</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
<input id="checkout" name="checkout" type="text" class="form-control" required="required" wfd-id="12">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="text" class="col-2 col-form-label">Name</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-user"></i>
</div>
</div>
<input id="text" name="text" type="text" required="required" class="form-control" wfd-id="11">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="email_id" class="col-2 col-form-label">Email</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-envelope-o"></i>
</div>
</div>
<input id="email" name="email" type="email" required="required" class="form-control" wfd-id="10">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-2 col-form-label">Phone #</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
<input id="phone" name="phone" placeholder="11 numeric" type="tel" required pattern="\d{11}" label="11 digits" class="form-control" wfd-id="9">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Room Type</label>
<div class="col-10">
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_0" type="checkbox" class="custom-control-input" value="" checked wfd-id="8">
<label for="roomtype_0" class="custom-control-label">Deluxe Room</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_1" type="checkbox" class="custom-control-input" value="" wfd-id="7">
<label for="roomtype_1" class="custom-control-label">Junior Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_2" type="checkbox" class="custom-control-input" value="" wfd-id="6">
<label for="roomtype_2" class="custom-control-label">Family Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_3" type="checkbox" class="custom-control-input" value="" wfd-id="5">
<label for="roomtype_3" class="custom-control-label">Cameron Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_4" type="checkbox" class="custom-control-input" value="" wfd-id="4">
<label for="roomtype_4" class="custom-control-label">Foster Suite</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Room Preference</label>
<div class="col-10">
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_0" type="radio" class="custom-control-input" value="No Preference" required="required" wfd-id="3">
<label for="preference_0" class="custom-control-label">No Preference</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_1" type="radio" class="custom-control-input" value="Non Smoking" required="required" wfd-id="2">
<label for="preference_1" class="custom-control-label">Non Smoking</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_2" type="radio" class="custom-control-input" value="Smoking" required="required" wfd-id="1">
<label for="preference_2" class="custom-control-label">Smoking</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="adults" class="col-2 col-form-label">Adults</label>
<div class="col-10">
<select id="adults" name="adults" class="custom-select" required="required" wfd-id="16">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="children" class="col-2 col-form-label">Children</label>
<div class="col-10">
<select id="children" name="children" class="custom-select" wfd-id="15">
<option value="None">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="textarea" class="col-2 col-form-label">Special Requirement</label>
<div class="col-10">
<textarea id="specialTxtarea" name="specialTxtarea" cols="40" rows="5" class="form-control" wfd-id="17"></textarea>
</div>
</div>
<div class="form-group row">
<div class="offset-2 col-10">
<button name="alpsubmit" type="submit" class="btn btn-primary btn-block" wfd-id="18" onclick="myFunction()">Submit</button>
</div>
</div>
</form>
This is for my assignment. For this reservation form, I am not required to use PHP to validate. What I am required is to have the form validate the field and upon submit, a response using window alert to pop out.
My lecturer has actually worked through with me and managed to get my codes to work. But somehow.. after I got home. I am unable to get the form to validate prior to submit and go back to home page
I was expecting that the form created will check through all field and be prompt prior to submit button pressed and go through window.alert with a Thank you response and bring back to index.html

I removed the on click on submit and added action="javascript:myFunction();" for the form and it will work here's the code for it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="myForm" action="javascript:myFunction();">
<div class="form-group row">
<label for="checkin" class="col-2 col-form-label">Check-In</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
<input id="checkin" name="checkin" type="text" class="form-control" required="required" wfd-id="13">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="checkout" class="col-2 col-form-label">Check-Out</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
<input id="checkout" name="checkout" type="text" class="form-control" required="required" wfd-id="12">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="text" class="col-2 col-form-label">Name</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-user"></i>
</div>
</div>
<input id="text" name="text" type="text" required="required" class="form-control" wfd-id="11">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="email_id" class="col-2 col-form-label">Email</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-envelope-o"></i>
</div>
</div>
<input id="email" name="email" type="email" required="required" class="form-control" wfd-id="10">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-2 col-form-label">Phone #</label>
<div class="col-10">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
<input id="phone" name="phone" placeholder="11 numeric" type="tel" required pattern="\d{11}" label="11 digits" class="form-control" wfd-id="9">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa "></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Room Type</label>
<div class="col-10">
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_0" type="checkbox" class="custom-control-input" value="" checked wfd-id="8">
<label for="roomtype_0" class="custom-control-label">Deluxe Room</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_1" type="checkbox" class="custom-control-input" value="" wfd-id="7">
<label for="roomtype_1" class="custom-control-label">Junior Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_2" type="checkbox" class="custom-control-input" value="" wfd-id="6">
<label for="roomtype_2" class="custom-control-label">Family Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_3" type="checkbox" class="custom-control-input" value="" wfd-id="5">
<label for="roomtype_3" class="custom-control-label">Cameron Suite</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input name="roomtype" id="roomtype_4" type="checkbox" class="custom-control-input" value="" wfd-id="4">
<label for="roomtype_4" class="custom-control-label">Foster Suite</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Room Preference</label>
<div class="col-10">
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_0" type="radio" class="custom-control-input" value="No Preference" required="required" wfd-id="3">
<label for="preference_0" class="custom-control-label">No Preference</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_1" type="radio" class="custom-control-input" value="Non Smoking" required="required" wfd-id="2">
<label for="preference_1" class="custom-control-label">Non Smoking</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="preference" id="preference_2" type="radio" class="custom-control-input" value="Smoking" required="required" wfd-id="1">
<label for="preference_2" class="custom-control-label">Smoking</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="adults" class="col-2 col-form-label">Adults</label>
<div class="col-10">
<select id="adults" name="adults" class="custom-select" required="required" wfd-id="16">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="children" class="col-2 col-form-label">Children</label>
<div class="col-10">
<select id="children" name="children" class="custom-select" wfd-id="15">
<option value="None">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="textarea" class="col-2 col-form-label">Special Requirement</label>
<div class="col-10">
<textarea id="specialTxtarea" name="specialTxtarea" cols="40" rows="5" class="form-control" wfd-id="17"></textarea>
</div>
</div>
<div class="form-group row">
<div class="offset-2 col-10">
<button name="alpsubmit" type="submit" class="btn btn-primary btn-block" wfd-id="18">Submit</button>
</div>
</div>
</form>
</div>
<script>
function myFunction() {
var requiredFields = document.getElementById('specialTxtarea');
window.alert('Thank for your Reservation');
//window.location = 'index.html';
}
</script>
</body>
</html>

parsley lib is not showing validation messages on this wizard

<form id="form1" action="" method="POST" data-parsley-validate="true" name="form-wizard">
<div class="wizard-step-1">
<fieldset>
<legend class="pull-left width-full">Search Slot </legend>
<!-- begin row -->
<div class="row">
<div class="col-md-3">
<div class="form-group block1">
<label>Date *</label>
<input type="text" name="dtpSearch" id="dtpSearch" placeholder="DD-MM-YYYY" class="form-control datepicker-autoClose1" data-parsley-group="wizard-step-1" required />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Start Time *</label>
<div class="input-group date 24hourtime" >
<input type="text" class="form-control" id="txtFromTime" name="txtFromTime" value="00:00 AM" placeholder="Enter StartTime" data-type="alphanum" data-parsley-required="true" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>End Time</label>
<div class="input-group date 24hourtime" >
<input type="text" class="form-control" id="txtToTime" name="txtToTime" value="23:59 PM" placeholder="Enter EndTime" data-type="alphanum" data-parsley-required="true" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Court Type</label>
<select class="form-control" id="ddlCtype" name="ddlCtype" data-parsley-required="true">
<option value="">Any</option>
<option value="1">Concrete</option>
<option value="2">Clay</option>
<option value="3">Grass</option>
<option value="4">Sand</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Roofed *</label>
<div>
<label class="radio-inline"><input type="radio" name="optRoofed" checked data-parsley-validate="false" value="0">No</label>
<label class="radio-inline"><input type="radio" name="optRoofed" data-parsley-validate="false" value="1">Yes</label>
</div>
</div>
</div>
</div>
<!-- end row -->
</fieldset>
</div>
<!-- end wizard step-1 -->
I am using this lib on this wizard. I have removed some of wizard step for sake of clarity. Now work fine on webapp other pages where i did not use this wizard. why it is not working on this wizard??
Note:Skipping some wizard step for the sake of clarity.

Categories

Resources