Currently validating a multistep form using parsley.js. All other required attributes works fine and validate properly. I just need help extending the form validation to ensure that the values for both password and confirm password fields match
$(function () {
var $sections = $('.form-section');
function navigateTo(index) {
// Mark the current section with the class 'current'
$sections
.removeClass('current')
.eq(index)
.addClass('current');
// Show only the navigation buttons that make sense for the current section:
$('.form-navigation .previous').toggle(index > 0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [type=submit]').toggle(atTheEnd);
}
function curIndex() {
// Return the current index by looking at which section has the class 'current'
return $sections.index($sections.filter('.current'));
}
// Previous button is easy, just go back
$('.form-navigation .previous').click(function() {
navigateTo(curIndex() - 1);
});
// Next button goes forward iff current block validates
$('.form-navigation .next').click(function() {
if ($('#individualForm').parsley().validate({group: 'block-' + curIndex()}))
navigateTo(curIndex() + 1);
});
// Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
$sections.each(function(index, section) {
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
});
navigateTo(0); // Start at the beginning
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.5.1/parsley.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="individualForm" action="" class="indivform" method="post">
<div id="individualForm1" class="form-section">
</div>
<div class="regForm">
<div class="form-group formGroup">
<label for="usertype"> Tell us who you are </label>
<select class="form-control allForms" name="usertype" id="usertype">
<option selected>Student</option>
<option>Intern</option>
<option>National Service</option>
<option>Entry-Level Employee</option>
<option>Mid-level Manager</option>
<option>Senior-Level Manager</option>
<option>Executive</option>
<option>Foreign Expert</option>
</select>
</div>
</div>
<div class="form-group formGroup">
<label for="email"> Email Address</label>
<input type="email" name="email" id="email" class="form-control allForms" required placeholder="Enter your email address">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="password"> Password </label>
<input type="password" name="password" id="password" minlength="6" class="form-control allForms" required placeholder="Enter password">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="password_confirmation"> Confirm Password </label>
<input type="password" name="password_confirmation" minlength="6" id="password_confirmation" class="form-control allForms" required placeholder="Re-enter password">
</div>
</div>
</div>
</div>
<div id="individualForm2" class="form-section">
<div class="text-center stepImages">
<img src="img/step-2.png" alt="step one image">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="firstname"> First Name</label>
<input type="text" name="firstname" id="firstname" class="form-control allForms" required placeholder="Enter first name">
</div>
<div class="form-group formGroup">
<label for="country">Your location</label>
<select class="form-control allForms" name="country" id="country" data-placeholder="Select country">
<option value="0">Getting your location...</option>
#if(isset($countries))
#foreach($countries as $country)
<option value="{{ $country->id }}" title="{{ $country->country_code }}">{{ $country->name }}</option>
#endforeach
#endif
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="lastname">Contact Last Name</label>
<input type="text" name="lastname" id="lastname" class="form-control allForms" required placeholder="Enter last name">
</div>
<div class="genderBox2 form-group formGroup">
<br>
<div class="radio-inline">
<label>
<input type="radio" name="gender" value="Male" checked="" >
Male
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="gender" value="Female">
Female
</label>
</div>
</div>
</div>
</div>
<div class="form-group formGroup">
{{--<div class="pi-col-sm-3">--}}
<div class="form-group">
<input name="dialcode" id="dialcode" class="form-control" placeholder="Dial Code" type="text">
</div>
{{--</div>--}}
<div class="form-group">
<input name="dialcode" id="dialcode" class="form-control" placeholder="Dial Code" required type="text">
</div>
<label for="individual_phone_number"> Phone Number</label>
<input type="text" name="phone" id="individual_phone_number" class="form-control allForms" required data-parsley-type="digits" placeholder="Enter your phone number">
</div>
</div>
<div class="modal-footer modalFooter form-navigation">
<button class="previous btn btn-success pull-left" id="newUserSubmitBtn" type="button"> Prev < </button>
<button class="next btn btn-success pull-right" id="newUserSubmitBtn" type="button"> Next > </button>
<button class="btn btn-default pull-right" id="individualSubmitBtn" type="submit"> Finish </button>
<span class="clearfix"></span>
</div>
</form>
and for both to be alphanumeric.
Should be easy using data-parsley-equalto and data-parsley-type="alphanum"
Related
Using the following form with required tags does not actaully validate my input, and always alerts "ok", what am I missing?
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputFirstName">Förnamn</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputLastName">Efternamn</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputPhone">Telefon</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Telefon"/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputMobile">Mobiltelefon</label>
<input type="text" class="form-control" id="inputMobile" placeholder="Mobiltelefon"/>
</div>
<div class="form-group col-sm-8">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="inputCompany">Företag</label>
<input type="text" class="form-control" id="inputCompany" placeholder="Företag" required/>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-3 pull-right" data-bind="click: submit">Submit</button>
</form>
Javascript, where i want to alert "ok" if validation passes:
vm.submit = function(){
alert("ok");
};
I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// 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
var validation = 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);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.
I have a modal where i put my form inside. Now, my problem is, when i click the button of my onclick="regpatient()" button, the required will pop-up but when i look at it in console, the data was submited by a post because of my onlick function. How can i do this?
Here is my modal:
<div class="modal-body">
<form class="form-horizontal" id="frm_patientreg">
<div class="form-group">
<label class="control-label col-sm-3" for="pfname">First Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pafname" name="pafname" placeholder="First name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pmname">Middle Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="pamname" name="pamname" placeholder="Middle name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="plname">Last Name:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="palname" name="palname" placeholder="Last name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="paddress">Address:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="paaddress" name="paaddress" placeholder="Address" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pcontact">Contact #:</label>
<div class="col-sm-7">
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" id="pacontact" name="pacontact" placeholder="Contact number" maxlength="11" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pbdate">Birthdate:</label>
<div class="col-sm-5">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="pabdate" name="pabdate" placeholder="Birthdate" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="page">Age:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paage" name="paage" placeholder="Age" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pheight">Height:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paheight" name="paheight" placeholder="Height (cm)" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pweight">Weight:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="paweight" name="paweight" placeholder="Weight (kg)" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="psex">Sex:</label>
<div class="col-sm-5">
<select class="form-control" id="psex" name="psex">
<option value="0">--- SELECT OPTION ---</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pmartiastat">Civil Status:</label>
<div class="col-sm-5">
<select class="form-control" id="pmartialstat" name="pmartialstat">
<option value="0">--- SELECT OPTION ---</option>
<option value="Single">Single</option>
<option value="Living common law">Living common law</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Separated">Separated</option>
<option value="Divorced">Divorced</option>
</select>
</div>
</div>
</div><!-- modal-body -->
<div class="modal-footer">
<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div><!-- modal-footer -->
</div><!-- modal-content -->
and here is my ajax where it fires when the button in footer of my modal is clicked:
function regpatient() {
var a = $('#psex').val();
var b = $('#pmartialstat').val();
if(a == "0" || b == "0") {
alert("Please select option");
}
else {
$.ajax({
url: siteurl+"sec_myclinic/addpatient",
type: "POST",
data: $('#frm_patientreg').serialize(),
dataType: "JSON",
success: function(data) {
alert("Successfully Added");
$('#frm_patientreg')[0].reset();
}
});
}
}
If I understand your problem right you want to stop the button's default submit action and only use your onclick script. Try this:
onclick="regpatient(event)"
and
function regpatient(event) {
event.preventDefault();
...
Edit
The required fields are not getting validated by the onclick function. Some checks like this for the required values should help stop the ajax call.
if (!$('#pafname').val()) {
return alert('Please fill in all required fields.');
}
// ajax code here ...
Use this
<button value="button" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
instead of this
<button value="submit" onclick="regpatient()" class="btn btn-primary">Register Patient</button>
First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>
Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL
A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});
I'm currently creating a sign up form using bootstrap and I was making the first name and last name text boxes inline but when I resize the browser by compacting it, the display of both text boxes seem to stick? I've tried using inline-block and also margin but it'll affect the others too which would look odd. Here is an sample. (You'd have to zoom-out to see the effect.)
http://jsfiddle.net/5ghc1r18/6/
<div class="container">
<div class="wrapper">
<div class="row">
<div style="overflow:auto;width:90%" class="col-lg-10">
<form id="form" action="welcome.php" class="form-horizontal" method="POST">
<h1 class="text-center">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Sign Up
</h1>
<div class="form-group">
<div class="col-lg-6">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
<div class="col-lg-6">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="email" placeholder="Email Address" name="email" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<label for="day">Date of Birth:</label>
<div id="date1" class="datefield">
<input id="day" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="DD" />/
<input id="month" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="MM" />/
<input id="year" type="tel" onkeypress="return isNumberKey(event)" maxlength="4" placeholder="YYYY" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<select name="gender" class="form-control" required>
<option value="">Select one</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">I'm not sure</option>
</select>
</div>
</div>
<div class="form group">
<div style="width:100%">
<button type="submit" class="btn btn-success btn-block"> <i class="fa fa-plus"></i> Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks for the help!
The problem in your HTML is here
<div class="form-group">
<div class="col-lg-6">
put <div class="form-group"> inside the <div class="col-lg-6"> currently you are doing opposite.
e.g;
<div class="col-lg-6">
<div class="form-group">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
You can give margin to the input boxes:
input[type="text"] {
margin: 10px auto;
}