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>
Related
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>
In this code, what happens when I change checkbox value (i.e. If I click on credit card checkbox) then <div class="creditcard"> shows, and if I click on paypal then <div class="paypal"> shows.
Now, when I choose credit card and then click on submit button, then form does not submit. And if I check paypal checkbox and click submit button then nothing happen again. I don't understand why.
How can I submit form whether I choose credit card checkbox or paypal?
$(document).ready(function() {
$('input.payment').on('change', function() {
$('input.payment').not(this).prop('checked', false);
});
$("#credit").click(function() {
if ($(this).is(":checked")) {
$(".creditcard").show();
$(".paypal").hide();
} else {
$(".creditcard").hide();
$(".paypal").show();
}
});
$("#paypal").click(function() {
if ($(this).is(":checked")) {
$(".paypal").show();
$(".creditcard").hide();
} else {
$(".paypal").hide();
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input type="checkbox" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="checkbox" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" required value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" required/>
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
You should be using radio buttons instead of checkboxes. I cleaned up your code also to use one event handler.
I also updated so the appropriate fields are dynamically set as required.
$(document).ready(function() {
$('input.payment').on('change', function() {
$("input[name='cardNumber']").prop("required",false);
$("input[name='paypal_email']").prop("required",false);
$(".creditcard").hide();
$(".paypal").hide();
if($(this).val() == "PayPal"){
$(".paypal").show();
$("input[name='paypal_email']").prop("required",true);
}
else{
$("input[name='cardNumber']").prop("required",true);
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
// 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!
I had a html form with set of input fields for each of which I am giving required="true" for validation. But when I click on submit after entering the mandatory fields it is give an error:
An invalid form control with name='' is not focusable
I know if we use novalidate to the form I wont get that error, but my validation wont work. How can I make my validation work without error?
<form name="customerForm" class="form-horizontal" id="custForm">
<fieldset>
<div class="form-group">
<label for="customerName" class="col-lg-4 col-lg-offset-1 control-label">Name</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerName" placeholder="Enter customer name" type="text" required="true" value = "{{customerName}}">
</div>
</div>
<div class="form-group">
<label for="postCode" class="col-lg-4 col-lg-offset-1 control-label">Post code</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.postcode" placeholder="Enter post code" type="text" value = "{{postCode}}">
</div>
<div class="col-lg-2">
<button type="next" class="btn btn-primary" ng-click="$ctrl.findAddress()">Find address</button>
</div>
</div>
<div class="form-group">
<label for="selectAddress" class="col-lg-4 col-lg-offset-1 control-label">Select address</label>
<div class="col-lg-4">
<select class="form-control" id="selectAddress" ng-model="$ctrl.quote.newClient.customerAddress" ng-change="$ctrl.populateAddressFields()">
<option ng-repeat="address in addresses"
value="{{address}}" >{{address}}</option>
</select>
</div>
</div>
<div class="form-group ng-hide">
<label for="textArea" class="col-lg-4 col-lg-offset-1 control-label">Address</label>
<div class="col-lg-4">
<textarea ng-model="$ctrl.quote.newClient.customerAddress" class="form-control" rows="3" required="true"></textarea>
</div>
</div>
<div class="form-group">
<label for="address1" class="col-lg-4 col-lg-offset-1 control-label">Address 1</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine1" placeholder="Enter Address 1" type="text" required="true" value = "{{addressLine1}}">
</div>
</div>
<div class="form-group">
<label for="address2" class="col-lg-4 col-lg-offset-1 control-label">Address 2</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine2" placeholder="Enter Address 2" type="text" required="true" value = "{{addressLine2}}">
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required="true" value = "{{emailId}}">
</div>
</div>
<div class="form-group">
<label for="customerMobile" class="col-lg-4 col-lg-offset-1 control-label">Mobile number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerMobile" placeholder="Enter customer mobile number" type="text" required="true">
</div>
</div>
<div class="form-group" ng-show="$root.customerDetails.tradeType.description == 'Limited Company'">
<label for="inputCompanyRegistrationNumber" class="col-lg-4 col-lg-offset-1 control-label">Company registration number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.companyRegNo" placeholder="Enter company registration number" type="text" required="true">
</div>
</div>
</fieldset>
</form>
And Iam using $valid to validate the form
<div class="col-lg-1">
<button form="custForm" type="submit" class="btn btn-primary right-button" ng-click="customerForm.$valid && $ctrl.proceedToPaymentDetails()">Next</button>
</div>
In the below layout, the last text field(UserName) alone not in correct size. I tried many ways, but nothing works. pls share any idea. my code is
<div id="wrapper">
<div class="row">
<div class="col-lg-6 vcenter ">
<div class="panel panel-success">
<div class="panel-heading text-center">
<h4>Login Help</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="row col-lg-12 radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username
</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email
</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile
</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="radio row col-lg-12" style="margin-top:5%;">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password
</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email
</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile
</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
</div>
<div class="col-lg-12 row">
<div class="col-lg-6">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
If all you're concerned with is the size of the last input then change this:
You have col-lg-12 row with a col-lg-6 inside of it, remove the col-lg-6 and change the col-lg-12 row to col-lg-6 row.
That being said I've included two alternative layouts that use bootstrap default classes and standard layouts for forms that may help as you're mixing col-*-* with rows in the same div and that isn't how the grid is structured.
See working examples with your original code (*fixed) and two samples.
<div class="col-lg-6 row">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="row">
<div class="col-lg-6 vcenter ">
<div class="panel panel-success">
<div class="panel-heading text-center">
<h4>Login Help (Original)</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="row col-lg-12 radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="radio row col-lg-12" style="margin-top:5%;">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
</div>
<div class="col-lg-6 row">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6 vcenter">
<div class="row">
<div class="panel panel-warning">
<div class="panel-heading text-center">
<h4>Standard Form</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
<label>
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Email Address</label>
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
<label>
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Email Address</label>
<input class="form-control" placeholder="E-mail" name="email" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Username</label>
<input class="form-control" placeholder="Username" name="uname" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6 vcenter">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>INLINE FORM</h4>
</div>
<div class="panel-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked/>Forgot Username</label>
<label class="radio-inline">
<input type="radio" name="userMailMob" id="mail1" value="option1" checked/>Email</label>
<label class="radio-inline">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Email Address</label>
<div class="col-sm-8">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="userPwd" id="userpwd2" value="option2" />Forgot Password</label>
<label class="radio-inline">
<input type="radio" name="pwdMailMob" id="mail2" value="option1" />Email</label>
<label class="radio-inline">
<input type="radio" name="pwdMailMob" id="mob2" value="option1" />Mobile</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Email Address</label>
<div class="col-sm-8">
<input class="form-control" placeholder="E-mail" name="email" type="email" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Username</label>
<div class="col-sm-8">
<input class="form-control" placeholder="Username" name="uname" type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
Set the heights of input elements using classes like .input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-* and .col-sm-*.
bootstrap