Validate form before Bootstrap modal popup - javascript

in php file i have simple form and bootstrap modal . after clicking submit button bootstrap modal will display.
Form is:
i need to validate above form fields. if it is success then i need to display the modal and validate those fields.
Modal is:
My Code is:
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Fill Below Details</h3>
</div>
<div class="modal-body">
<div class="main-login pop-up-form">
<form class="" method="post" action="#"><br>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Address"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Phone No"/>
</div>
</div>
</div>
<div class="form-group ">
CLICK For Enquiry
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
Form code is showed below:
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
<input type="date" class="form-control" name="udate" id="udate" placeholder="ghf" style="height: 39px !important;" />
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<select name="ftime" id="ftime">
<option value="">---Select---</option>
<option value="1">Breakfast</option>
<option value="2">Lunch</option>
<option value="3">Dinner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<select id="ftype" name="ftype" onchange="validate()">
<option value="">--select--</option>
<option value="hai">V</option>
<option value="hai">NV</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="amount" id="amount" placeholder="hai" readonly="readonly" />
</div>
</div>
</div>
<div class="form-group ">
<a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick="
validate2()">Submit</a>
</div>
</form>
i was not able to validate both the form and modal. please help me on this..
thanks in advance


You can write a simple validation method
An example could be....
function checkValidation()
{
var isValid = true;
if($("#date").val() == null){
isValid = false;
}
if($("#person").val() == null){
isValid = false;
}
if($("#mail").val() == null){
isValid = false;
}
return isValid;
}
if(checkValidation())
$("#modalDialog").show();
else
alert("Form is not valid");


Try this code:
First attach an click listener to your form submit button and validate your form when button is clicked and if validation is successful then you can show your modal.
$(document).on('click', '#submit', function(e){
e.preventDefault();
var validated = validateform();
if(validated){
$('#modal').modal('show');
}
});
Write your validation logic inside this function and return true if validation passes tests.
function validateform(){
// logic for form validation
// return true if validated successfully
}

Related

Jquery Ajax POST is not getting dynamically added inputs inputs have names and I have tried other solutions

Ajax Post request is only getting the first of the dynamically added input fields at the bottom all others are ignored
I have tried .on() .live() .submit() functions but get the same result. My php file consists of a print_r($_POST); and nothing else this is put into the console.
https://pastebin.com/CuAPSzKe - I have put the full code on the pastebin as the whole table and the script used to add the new inputs is included.
This is the code to make the call:
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
console.log(data);
}
});
});
My expected result is to be able to post all dynamically added fields with their names as an array, alternatively all dynamically added fields in their own array.

It is having a major issue due to the way your html is arbitrarily structured and you are missing a end div tag for your item information container. Fix these issues and it will run. You also may want to go ahead and start your first item information with a start of 0 and set your counter to 1 so it is easier to aparse on the backend once you recieve the info.
Move your form tag under your first container:
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
End tag
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</form>
</div>
Full example of cleaned up code running:
function test() {
var billName = document.getElementById('bill_name');
var shipName = document.getElementById('ship_name');
var billLine1 = document.getElementById('bill_line_1');
var shipLine1 = document.getElementById('ship_line_1');
var billLine2 = document.getElementById('bill_line_2');
var shipLine2 = document.getElementById('ship_line_2');
var billLine3 = document.getElementById('bill_line_3');
var shipLine3 = document.getElementById('ship_line_3');
var billLine4 = document.getElementById('bill_line_4');
var shipLine4 = document.getElementById('ship_line_4');
var billCounty = document.getElementById('bill_county');
var shipCounty = document.getElementById('ship_county');
var billPostcode = document.getElementById('bill_post');
var shipPostcode = document.getElementById('ship_post');
var billTele = document.getElementById('bill_telephone');
var shipTele = document.getElementById('ship_telephone');
var billEmail = document.getElementById('bill_email');
var shipEmail = document.getElementById('ship_email');
shipName.value = billName.value;
shipLine1.value = billLine1.value;
shipLine2.value = billLine2.value;
shipLine3.value = billLine3.value;
shipLine4.value = billLine4.value;
shipCounty.value = billCounty.value;
shipPostcode.value = billPostcode.value;
shipTele.value = billTele.value;
shipEmail.value = billEmail.value;
}
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
var test = form.serialize();
alert(test);
});
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td> <input type="text" class="form-control" name="sku' + counter + '" /></td> ';
cols += '<td> <input type="text" class="form-control" name="quantity' + counter + '" /></td> ';
cols += ' <td> <input type="text" class="form-control" name="price' + counter + '" /></td>';
cols += ' <td> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="bill_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Name</div>
</div>
<input id="bill_name" name="bill_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 1</div>
</div>
<input id="bill_line_1" name="bill_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 2</div>
</div>
<input id="bill_line_2" name="bill_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 3</div>
</div>
<input id="bill_line_3" name="bill_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 4</div>
</div>
<input id="bill_line_4" name="bill_line_4" type="text" aria-describedby="bill_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="bill_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="bill_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing County</div>
</div>
<input id="bill_county" name="bill_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Postcode</div>
</div>
<input id="bill_post" name="bill_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Telephone Number</div>
</div>
<input id="bill_telephone" name="bill_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Email Address</div>
</div>
<input id="bill_email" name="bill_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="ship_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Name</div>
</div>
<input id="ship_name" name="ship_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 1</div>
</div>
<input id="ship_line_1" name="ship_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 2</div>
</div>
<input id="ship_line_2" name="ship_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 3</div>
</div>
<input id="ship_line_3" name="ship_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 4</div>
</div>
<input id="ship_line_4" name="ship_line_4" type="text" aria-describedby="ship_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="ship_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="ship_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping County</div>
</div>
<input id="ship_county" name="ship_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Postcode</div>
</div>
<input id="ship_post" name="ship_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Telephone Number</div>
</div>
<input id="ship_telephone" name="ship_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Email Address</div>
</div>
<input id="ship_email" name="ship_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
<button type="button" onclick="test()" class="btn btn-primary pull-right"><i class="fa fa-copy"></i></button>
</div>
</div>
<br>
<div class="container">
<h2>Extra Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group row">
<label for="ship_method" class="col-5 col-form-label">Shipping Method</label>
<div class="col-7">
<div class="input-group">
<input id="ship_method" name="ship_method" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-anchor"></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="extra_shipping" class="col-5 col-form-label">Extra Shipping</label>
<div class="col-7">
<div class="input-group">
<input id="extra_shipping" name="extra_shipping" type="text" class="form-control" aria-describedby="extra_shippingHelpBlock">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-money"></i>
</div>
</div>
</div>
<span id="extra_shippingHelpBlock" class="form-text text-muted">(Leave Blank For Free Shipping)</span>
</div>
</div>
<div class="form-group row">
<label for="mage_order_number" class="col-5 col-form-label">Magento Order Number</label>
<div class="col-7">
<div class="input-group">
<input id="mage_order_number" name="mage_order_number" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<h2>Item Information</h2>
<div class="row">
<div class="col-12">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>SKU</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="sku" class="form-control" />
</td>
<td>
<input type="number" name="quantity" class="form-control" />
</td>
<td>
<input type="number" name="price" class="form-control" />
</td>
<td>
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

Dynamically add sequence numbers to labels

I have an HTML form which has text field with an add more button. When we click on the button a text field is added to the form. Following is the code for the form:
<div class="input-group g-mb-25">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]">1.</label>
</div>
<input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>
<div class="row">
<div class="col-lg-4">
<!-- Checkbox -->
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input" id="numCheck">
<span class="custom-control-label">Show numbers</span>
</label>
<!-- End Checkbox -->
</div>
</div>
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
The js for adding the fields is as follows:
// Add more fields
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('u-btn-cyan').addClass('u-btn-lightred')
.html('<span class="fa fa-trash"></span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
Notice that I have prepended a label to the text field:
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]"></label>
</div>
What I am unable to figure out is How can I add numbers to the label as I add more fields, 1 being the default number for the first Title field
Added form HTML with default field:
<div class="input-group g-mb-25">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]"></label>
</div>
<input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
The new field is added as:
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>

Get values from dynamic inputs Spring

i'd like to know how i can get the values from a dynamic input in Spring, a method that get the values, can someone explain me how to do that ?
This is my html and javascript input.
JSP
<div class="form-group">
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button">
<i class="glyphicon glyphicon-plus"></i> Adicionar
</button>
</div>
</div>
<!-- Copy Fields -->
<div class="copy hide">
<div class="control-group input-group" style="margin-top: 10px">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button">
<i class="glyphicon glyphicon-remove"></i> Remover
</button>
</div>
</div>
</div>
JAVA SCRIPT
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Thanks.

Reset Password Using Html and javascript

I Have a requirement where i have 3 input fields namely
1.old password
2.new password
3.confirm password.
For which i need to apply rules as follows.
1.Old and new passwords should not match.
2.No field should be empty.
3.New password and confirm password inputs should be same.
If all these validations passes then only form should be submitted.
Here is the Html file for which i need to apply js
<form role="form" method="post">
<div class="box box-primary">
<div class="box-header">
<h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
<div class="pull-right">
<button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
<button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Old Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>New Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Confirm Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
</form>
thank you

Please replace with your ids..
function checkForm()
{
var oldP=document.getElementById("oldP").value;
var newP=document.getElementById("newP").value;
var confirmP =document.getElementById("confirmP").value;
if(oldP!=""&&newP!=""&&confirmP!="")
{
if(oldP!=newP)
{
if(newP==confirmP)
{
return true;
}
else
{
alert("Confirm password is not same as you new password.");
return false;
}
}
else
{
alert(" This Is Your Old Password,Please Provide A New Password");
return false;
}
}
else
{
alert("All Fields Are Required");
return false;
}
}
An in thml you need to add
<form onsubmit="return checkForm();" ----- >
For reset you can create a function somting like this
function resetForm()
{
var oldP=document.getElementById("oldP").value="";
var newP=document.getElementById("newP").value="";
var confirmP =document.getElementById("confirmP").value="";
}
and call when you want form reset.

firstly you should catch the click avtion on submit button and check the fields
$([name=Submit]).on('click', function(e) {
if (($('#oldPassword').val() == "")||($('#newPassword').val() == "")||($('#confirmPassword').val() == "")) {//check 2
e.preventDefault();
}
if ($('#oldPassword').val() == $('#newPassword').val()) {//check 1
e.preventDefault();
}
if ($('#newPassword').val() != $('#confirmPassword').val()) {//check 3
e.preventDefault();
}
}
P.S. i wrote code in this style because i want to show all steps. shurely you can combine 'if's in one to clear your code. as example u can combine check 1 and check 3 and put it in else block of check 2

create a function and call on onClick of button
<button type="button" name="Submit" value="Save" class="btn btn-danger" onclick="Function();"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" "></i> Save</button>
Your javascript Function will be Like this
<script>
function Function() {
var oldpasswprd = document.getElementById('oldPassword').value;
var newpassword = document.getElementById('newPassword').value;
var confirmpassword = document.getElementById('confirmPassword').value;
if (oldPassword == "" || newpassword == "" || confirmpassword == "") {
alert('Please fill all the details');
}
else if (oldpasswprd == newpassword) {
alert("Old password and New Password cannot be same");
}
else if (newpassword != confirmpassword) {
alert("password mismatch");
}
}
</script>

<form role="form" method="post">
<div class="box box-primary">
<div class="box-header">
<h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
<div class="pull-right">
<button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
<button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Old Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>New Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Confirm Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
</form>

Bootstrap validation states with file upload

I used bootstrap to return feedback to user about upload result.
So when the upload go well I use green success feedback, otherwise I return red error feedback.
But if he push browse button I would like to return to no feedback input tag, how can i do it?
This is part of my code:
<form class="input-group col-xs-12" method="post"
enctype="multipart/form-data" th:action="#{/file/excelFileRead}">
<div class="btn btn-primary btn-file col-xs-2">
<!-- Using accept the browse window allows only excel files -->
Browse… <input type="file" name="file"
accept=".xls, .xlsx, .xlsm" />
</div>
<!-- Manage success message -->
<div th:if="${opened == 'true'}">
<div class="form-group has-success has-feedback col-xs-8">
<input type="text" class="form-control" readonly="readonly"
id="inputSuccess2" aria-describedby="inputSuccess2Status"
th:value="${fileName}"> <span
class="glyphicon glyphicon-ok form-control-feedback"
aria-hidden="true"></span> <span id="inputSuccess2Status"
class="sr-only">(success)</span>
<label class="control-label"
for="inputSuccess2" th:text="${successMessage}"></label>
</div>
</div>
<div th:if="${opened == 'false'}">
<div class="form-group has-error has-feedback">
<input type="text" class="form-control" readonly="readonly"
id="inputError2" th:value="${fileName}"
aria-describedby="inputError2Status"> <label
class="control-label" for="inputError2"
th:text="${errorMessage}"></label> <span
class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span> <span id="inputError2Status"
class="sr-only">(error)</span>
</div>
</div>
<!-- <div th:if="${opened == null}">
<div class="col-xs-8">
<input type="text" class="form-control" readonly="readonly"
th:value="${fileName}" />
</div>
</div>-->
<div class="col-xs-2">
<input type="submit" class="btn btn-info" value="Open" />
</div>
</form>

Categories

Resources