I am using bootstrap validator to validate my form created with bootstrap.
I have used the bootstrapValidator function to validate my form and also built in submitHandle of this function. In submitHandle, i am using simply post method as you can see.
major problem is I am not able to submit my form after clicking the submit button.You can also run code snippet and can see that after hitting submit button,it just stuck and then if I change any of the above field and then click submit again then it works fine. Not able to make it work on first attempt.
Not able to find bug....any help would be appreciated.
thanks!!
$(document).ready(
function() {
var validator = $("#registration-form").bootstrapValidator({
live: 'enabled',
feedbackIcons: {
//valid: 'glyphicon glyphicon-ok',
//invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fname: {
message: "this field is required",
validators: {
notEmpty: {
message: "this field is required"
},
stringLength: {
max: 20,
message: "this field cannot be larger than 20 characters"
}
}
},
lname: {
message: "This field is required",
validators: {
notEmpty: {
message: "this field is required"
},
stringLength: {
max: 20,
message: "this field cannot be larger than 20 characters"
}
}
},
department: {
validators: {
greaterThan: {
value: 1,
message: "choose one department"
}
}
},
year: {
validators: {
greaterThan: {
value: 1,
message: "select your current year"
}
}
},
email: {
message: "Email address is required",
validators: {
notEmpty: {
message: "Please provide an email address"
},
emailAddress: {
message: "invalid email address"
}
}
}
},
submitHandler: function(validator, form, submitButton) {
$.ajax({
url: 'register.php',
type: 'post',
dataType: 'json',
data: $("#registration-form").serialize(),
success: function(data) {;
}
});
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning Boostrap</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/basic-template.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- BootstrapValidator CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
<!-- jQuery and Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js" type="text/javascript"></script>
<!-- BootstrapValidator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="column col-md-6">
<div class="panel panel-default panel_custom">
<div class="panel-heading" style="background:linear-gradient(to left,black 70%,#300032); border:0px">Registration</div>
<div class="panel-body">
<form id="registration-form" method="POST" action="register.php" role="form">
<div class="form-group">
<label class="control-label" for="fname">name:</label>
<div class="row">
<div class="column col-md-6">
<input type="text" class="form-control" id="fname" name="fname" placeholder="First" />
</div>
<div class=" col-md-6">
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last" />
</div>
</div>
</div>
<div class="row">
<div class="column col-md-6">
<div class="form-group">
<label class="control-label" for="department" style="padding-top:10px">Department:</label>
<Select id="department" name="department" class="form-control" ">
<option value="0 ">choose one</option>
<option value="1 ">computer Science</option>
<option value="2 ">Bio medical science</option>
<option value="3 ">Instrumentaion</option>
<option value="4 ">Physics</option>
<option value="5 ">Polymer science</option>
<option value="6 ">Microbiology</option>
<option value="7 ">Food technology</option>
<option value="8 ">Electronics</option>
</select>
</div>
</div>
<div class="form-group ">
<div class="column col-md-6 " >
<label class="control-label " for="year " style="padding-top:10px ">Year:</label>
<Select id="year " name="year " class="form-control " ">
<option value="0">choose year</option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="column col-md-6">
<div class="form-group">
<label class="control-label" for="male" style="padding-top:10px">Gender:</label>
<div class="radio">
<label>
<input type="radio" value="1" name="gender" required/>Male</label>
</div>
<div class="radio">
<label style="padding-left:20px">
<input type="radio" value="2" name="gender" />Female</label>
</div>
</div>
</div>
<div class="column col-md-6">
<div class="form-group">
<label class="control-label" for="email" style="padding-top:10px">E-mail Address:</label>
<input type="text" class="form-control" id="email" placeholder="Email Address" name="email" />
</div>
</div>
</div>
<div class="row">
<div class="column col-md-12">
<button class="btn btn-success" type="submit" value="but" name="submit">Submit</button>
</div>
</div>
</form>
<div id="confirmation" class="alert alert-success hidden" style="background:linear-gradient(to left,black 70%,#300032); border:none;">
<span class="glyphicon glyphicon-star"></span>
<h4>Thank you for registering. We will revert back shortly on email provided by you</h4>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have 2 buttons on my form, one is a recaptcha submit button and the other is a submit button which validates the javascript against the form. I want 1 button to do both things but cannot figure it out. I tried moving the attrbiutes from the recaptcha button to the other submit button but this did not work. Google gave me a snippet of code and I cross referenced it with the original code and made some changes
Please note: in my code, where it says "my-site-key" I am actually using my recaptcha site key
can anybody help?
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sales Inquiry || dontmissthebus.co.uk</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee:300,700" rel="stylesheet">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("main-offer-form").submit();
}
</script>
</head>
<body>
<section class="bg-alt hero p-0">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-faded text-center col-fixed">
<div class="vMiddle">
<h3 class="pt-4 h2">
<span class="text-green">dontmissthebus.co.uk</span>
<br>
<small>available for sale</small>
</h3>
<p class="mt-4">
To make an offer either fill out the form, or go to our main website
</p>
<!--
<div class="pt-5">
<label for="name">
<a class="btn text-white bg-green btn-lg">Buy now for $4999</a>
</label>
</div>
-->
<div class="row d-md-flex text-center justify-content-center text-primary action-icons">
<!--
<div class="col-sm-4">
<p><em class="ion-ios-telephone-outline icon-md"></em></p>
<p class="lead">+[Your Phone]</p>
</div>
<div class="col-sm-4">
<p><em class="ion-ios-chatbubble-outline icon-md"></em></p>
<p class="lead">email#[Your Domain].com</p>
</div>
-->
</div>
</div>
</div>
<div class="col-sm-6 offset-sm-6">
<section class="bg-alt">
<div class="container">
<div class="row height-100">
<div class="col-sm-10 offset-sm-1 mt-2">
<form id="main-offer-form" action="contact.php" method="post">
<h2 class="text-primary">Interested in this domain?</h2>
<hr/>
<div class="form-group">
<input
type="text"
name="name"
id="name"
class="form-control"
placeholder="Full name (Required)"
>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<input
type="email"
name="email"
class="form-control"
placeholder="Email (Required)"
>
</div>
</div>
<div class="col">
<div class="form-group">
<input
type="text"
name="phone"
class="form-control"
placeholder="Phone number (Required)"
>
</div>
</div>
</div>
<div class="form-group">
<input
type="number"
name="price"
class="form-control"
min="0"
placeholder="Offer price in GBP (Required)">
</div>
<div class="form-group">
<textarea name="comments" class="form-control" placeholder="Message (optional)"></textarea>
</div>
<div class="form-group">
<button class="g-recaptcha btn text-white btn-lg bg-primary btn-block" data-sitekey="my-site-key" data-callback='onSubmit'>Submit</button>
</div>
<button type="submit" class="btn text-white btn-lg bg-primary btn-block">Make an offer</button>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
$( "#main-offer-form" ).validate({
errorClass: 'form-control-feedback',
errorElement: 'div',
highlight: function(element) {
$(element).parents(".form-group").addClass("has-danger");
},
unhighlight: function(element) {
$(element).parents(".form-group").removeClass("has-danger");
},
rules: {
name: 'required',
email: {
required: true,
email: true
},
phone: {
required: true,
minlength:10,
maxlength:17
},
price: "required",
comments: {
maxlength: 500
}
},
messages: {
name: 'Please enter your name.',
email: {
required: 'You can not leave this empty.',
email: 'Please enter a valid email address.'
},
phone: {
required: 'You can not leave this empty.',
matches: 'Please enter a valide phone number.',
minlength: 'Phone number should be min 10 digits.',
maxlength: 'Phone number should be max 17 digits.'
},
price: {
price: 'Please enter offered price.'
},
comments: {
maxlength: 'Message length must be less than 500 character.'
}
}
});
</script>
</body>
</html>
You need to do this programmatically.
First remove all the data attributes on your button so that it doesn't add event listeners automatically.
Then update your onSubmit function to manually trigger the recaptcha validation like.
function onSubmit(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('my-site-key', {action: 'submit'})
.then(function(token) {
// manually submit the form from here
document.getElementById("main-offer-form").submit();
});
});
}
In case of such road blocks, always refer to the official documentation.
I've below code and i trying to change validation rules and its message dynamically. But, i'm doing something wrong so that my code is not working as i want. i need to do when user select united state country then my validation rule will work for drop down of states and for any other countries the rule will work for input box of state field. but i am not able to change validation message dynamically also the rules not modifying properly
$(document).ready(function () {
var validator = $("#useform").validate({
rules: {
phone: {"required": true, "maxlength": 15, digits: true, "minlength": 10},
fax: {"required": true, "maxlength": 15, digits: true, "minlength": 10},
country:"required",
zip: {"required": true, "maxlength": 15,"minlength": 5},
},
messages: {
phone: {required:"Phone is required",maxlength:"Maximum 15 characters required",minlength:"Minimum 10 characters required"},
fax: {required:"Fax is required",maxlength:"Maximum 15 characters allowed",minlength:"Minimum 10 characters required"},
country: "Country is required",
state: "State is required",
zip: {digits:"ZIP should be numeric", required:"ZIP is required",maxlength:"Maximum 15 characters allowed",minlength:"Minimum 5 characters required"},
sel_state: {required: "State is required"},
}
});
if($('#country').val() == 'us')
{
$( "#zip" ).rules( "add", {
digits : true
});
}
else{
}
});
function checkCountryState(value) {
if($('#country').val() == 'us')
{
$('#state').hide();
$('#sel_state').show();
$( "#sel_state" ).rules( "add", {
required : true
});
$( "#state" ).rules( "remove",
"required"
);
}
else{
$('#state').show();
$( "#sel_state" ).rules( "remove", "required");
$( "#state" ).rules( "add",
{
required : true
}
);
$('#sel_state').hide();
}
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
</head>
<form class="form-validate" action="" method="post" name="userform" id="userform" autocomplete="off">
<div class="row">
<div class="col-lg-12">
<div class="portlet ">
<div class="portlet-body">
<div class="row">
<div class="col-md-12 col-xl-8 my-xl-3">
<fieldset class="border h-100 my-xl-0">
<div class="row">
<div class="col-md-6 col-xl-4">
<div class="form-group">
<label class="control-label" for="phone">Phone:<span class="require">*</span></label>
<div class="input-icon right">
<input name="phone" value="" maxlength="15" id="phone" placeholder="Phone" type="text" class="form-control required">
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="form-group">
<label class="control-label" for="fax">Fax:<span class="require">*</span></label>
<div class="input-icon right">
<input name="fax" value="" id="fax" placeholder="Fax" type="text" class="form-control required" maxlength="15" >
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="form-group">
<label class="control-label" for="country">Country:<span class="require">*</span></label>
<div class="input-icon right">
<!-- remove_validation(this.id), renderStateForBilling(this.value);-->
<select name="country" id="country" class="form-control custom-select" onchange="checkCountryState(this.value);">
<option value="">--Select--</option>
<option value="us">Unieted States</option>
<option value="uk">Unieted Kingdom</option>
<option value="in">India</option>
</select>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="form-group">
<label class="control-label" for="state">State:<span class="require">*</span></label>
<div class="input-icon right">
<input name="state" value="" id="state" type="text" class="form-control" style="display:none">
<select data-selected-state="" name="sel_state" id="sel_state" class="form-control custom-select required phone-group" >
<option>--Select--</option>
<option value="Alabam">Alabam</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="form-group">
<label class="control-label" for="zip">Zip:<span class='require'>*</span></label>
<div class="input-icon right">
<input name="zip" value="" placeholder="Zip" id="zip" type="text" class="form-control " maxlength="15" >
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right px-0">
<div class="row mx-0">
<div class="col-md-12">
<input type="submit" class="btn btn-success" value="Save"/>
</div>
</div>
</div>
</div>
</form>
Use the depends option (vaguely documented under rules) as in:
rules: {
// ...
state: {
required: {
depends: el => $('#country').val() == 'us',
}
},
// ...
},
Dynamic messages can be done in a similar way (described under messages):
messages: {
// ...
state: {
required: el => {
if($('#country').val() == 'us') return 'State is required';
},
},
// ...
},
jQuery validator doesn't recognize the messages that I set for the error. Could you help me?
This is my HTML document:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Subir cursos</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/jquery-ui.theme.css">
<link rel="stylesheet" href="css/jquery-ui.structure.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<ol class="breadcrumb">
<li>Inicio</li>
<li>Gestor</li>
<li class="active">Subir Curso</li>
</ol>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-plus" aria-hidden="true"> Subir Catalogo
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="text-center">
Subir curso
</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form role="form" enctype="multipart/form-data" method="post" id="curso" action="R/rCurso.php">
<p class="text-muted">Los campos marcados con (<span style="color:red">*</span>) son obligatorios</p>
<div class="form-group">
<label>Curso <span style="color:red">*</span></label>
<input class="form-control" id="ccrs" name="crs" type="text" required data-validation="length" pattern="/^[ A-Za-z0-9_#./#&+-]*$/"/>
</div>
<div class="form-group">
<label>Indice </label>
<textarea class="form-control" name="idx" id="cidx" ></textarea>
</div>
<div class="form-group">
<label>Descripcion</label>
<textarea class="form-control" name="dsr" id="cdsr" ></textarea>
</div>
<div class="form-group">
<label>Fecha <span style="color:red">*</span></label>
<input name="fch" type="text" id="datepicker" required/>
</div>
<div class="form-group">
<label>Idioma <span style="color:red">*</span></label>
<select id="languaje" name="lng" required>
</select>
</div>
<div class="form-group">
<label>Imágen <span style="color:red">*</span></label>
<input id="imgPick" name="imgPick" value="" type="hidden">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#sel">Seleccionar Imagen</a></li>
<li><a data-toggle="tab" href="#upload">Subir imagen</a></li>
</ul>
<div class="tab-content">
<div id="sel" class="tab-pane fade in active">
<h3>Selecciona una Imagen </h3>
<div class="row">
<div class="col-xs-12 col-md-12" id="pickimg">
</div>
</div>
</div>
<div id="upload" class="tab-pane fade">
<h3>Subir Imagen</h3>
<input id="exampleInputFile" name="input_field_name" type="file" />
<p class="help-block">
Solo archivos png, jpg, y jpeg de 600x600px
</p>
</div>
</div>
</div>
<div class="form-group">
<label>Enlace Youtube <span style="color:red">*</span></label>
<input class="form-control" name="url1" id="curl1" type="text" required/>
</div>
<div class="form-group">
<label>Enlace Vimeo</label>
<input class="form-control" name="url2" id="curl2" type="text" />
</div>
<div class="form-group">
<label>Enlace DailyMotion</label>
<input class="form-control" name="url3" id="curl3" type="text" />
</div>
<div class="form-group">
<label>Nivel <span style="color:red">*</span></label>
<select name="lvl" id="clvl" required>
<option value="1">Superior</option>
<option value="2">Medio Superior</option>
</select>
</div>
<div class="form-group">
<label>Palabras clave <span style="color:red">*</span></label>
<input class="form-control" name="key" id="ckey" type="text" required/>
</div>
<div class="form-group">
<label>Autor <span style="color:red">*</span></label>
<select name="idAuth" id="idAuth" required>
</select>
</div>
<div class="form-group"><script src="js/jquery.js"></script>
<label>Escuela <span style="color:red">*</span></label>
<select name="idEscu" id="idEscu" required>
</select>
</div>
<div class="form-group">
<label>Categoria <span style="color:red">*</span></label>
<select id="catg" name="idCatg" required>
</select>
</div>
<div class="form-group">
<label>Subcategoria <span style="color:red">*</span></label>
<select id="subCat" name="idSubctg" required>
</select>
</div>
<button type="submit" id="save" class="btn btn-default">
Enviar
</button>
</form>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<script src="js/webService.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-validate.js"></script>
And this is the Script part where I have to set the messages right?, I did but then when I test, I get the default error message that is
This field is required.
here the script part, tell me if other functions make that the code works like that or if I did something wrong
$(document).ready(inicio);
function inicio() {
$(function () {
$("#datepicker").datepicker();
});
$( "#curso" ).validate( {
onkeyup: function (element, event) {
if (event.which === 9 && this.elementValue(element) === "") {
return;
} else {
this.element(element);
}
},
rules: {
ccrs: {
required: true,
minlength: 10
},
cidx: {
minlength: 10
},
cdsr: {
minlength: 10
},
datepicker: {
required: true,
date: true
},
languaje: {
required: true
},
curl1: {
required: true,
url: true
},
curl2: {
url: true
},
curl3: {
url: true
}
},
messages: {
ccrs: {
required:"Please enter your firstname",
minlength:"el minimo es 10"},
cidx: {
minlength:"your test must have more than 10 characters"},
cdsr: {
minlength:"your test must have more than 10 characters"},
datepicker: {
required: "Please set a date",
date: "It must be a Date"
},
languaje: {
required: "Please set any language"
},
curl1: {
required:"Please enter a valid email address",
url: "you must set an url"}
}
} );
var autores = "#" + $('#idAuth').attr('id');
var escuelas = "#" + $('#idEscu').attr('id');
var categorias = "#" + $("#catg").attr('id');
var subcategorias = "#" + $('#subCat').attr('id');
var idiomas = "#" + $('#languaje').attr('id');
listAutores(autores);
listEscuelas(escuelas);
listCategorias(categorias);
listIdiomas(idiomas);
$(categorias).one(function () {
listSubcategorias(subcategorias, $(this).val());
});
$(categorias).on("change", function () {
listSubcategorias(subcategorias, $(this).val());
});
listImgCursos("#pickimg");
}//inicio
Within .validate(), you've mixed up the id with the name...
rules: {
ccrs: { // <- must match the NAME, not the ID!
required: true,
minlength: 10
},
....
},
messages: {
ccrs: { // <- must match the NAME, not the ID!
required: "Please enter your firstname",
minlength: "el minimo es 10"
},
....
For simplicity, just make the id and name the same.
<input id="ccrs" name="ccrs" type="text" ....
The only reason validation was still working was because you set some HTML5 validation attributes inline. For example, required was only working because you had the required attribute inline (that's also why you saw the default message).
BTW, there is no need to have inline HTML5 validation attributes when you properly declare the rules within the .validate() method. Remember, the jQuery Validate plugin will dynamically disable HTML5 validation, so certain HTML5 attributes will be picked up and used by jQuery Validate, while others will be ignored.
DEMO: jsfiddle.net/psr9grq7/3/
I am trying to create a registration form in Bootstrap and then connecting it to the Oracle Database but the data entered by the user isn't sending any value to the database. Please suggest what editing I should do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home - Student Registration Form</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<style>
.error{
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<form id="regform" class="form-horizontal" action="NewFile.jsp">
<fieldset>
<!-- Form Name -->
<legend>Student Registration</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="firstname">First Name</label>
<div class="col-md-4">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lastname">Last Name</label>
<div class="col-md-4">
<input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="dob">Date of birth</label>
<div class="col-md-4">
<input id="dob" name="dob" type="text" placeholder="Date of birth" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="age">Age</label>
<div class="col-md-4">
<input id="age" name="age" type="text" placeholder="Age" class="form-control input-md" disabled>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="sex">Sex</label>
<div class="col-md-4">
<label class="radio-inline"><input type="radio" name="sex" value="Male">Male</label>
<label class="radio-inline"><input type="radio" name="sex" value="Female">Female</label>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="subjects">Subjects</label>
<div class="col-md-4">
<select id="subjects" name="subjects" class="form-control">
<option value="1">Database</option>
<option value="2">ADA</option>
<option value="3">Networking</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="localaddress">Local Address</label>
<div class="col-md-4">
<textarea class="form-control" id="localaddress" name="localaddress"></textarea>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="localaddresscheckbox">Permenant address</label>
<div class="col-md-4">
<label class="checkbox-inline" for="localaddresscheckbox">
<input type="checkbox" name="localaddresscheckbox" id="localaddresscheckbox" value="1">
Copy Local Address to permanent Address
</label>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="permenantaddress">Permenant Address</label>
<div class="col-md-4">
<textarea class="form-control" id="permenantaddress" name="permenantaddress"></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
(function() {
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");
$("#regform").validate({
rules: {
dob: "required",
localaddress: "required",
permenantaddress: "required",
firstname: {
lettersonly: true,
required: true
},
lastname: {
lettersonly: true,
required: true
}
},
submitHandler: function(form) {
form.submit();
}
});
//init datepicker
$('#dob').datepicker({
'format': 'yyyy-mm-dd',
'autoclose': true
});
//copy localaddress to permenant address on checkbox click
$('#localaddresscheckbox').click(function(){
if($(this).is(':checked')) {
var localaddress = $('#localaddress').val();
$('#permenantaddress').val(localaddress); //copy local address to permenant address box
}
else {
$('#permenantaddress').val('');
}
});
//age handler
$('#dob').datepicker().on('changeDate', function (ev) {
//get current date
var today = new Date();
var currentYear = today.getFullYear(); //current year
var selectedYear = $(this).val().split('-')[0]; //selected dob year
var age = Number(currentYear) - Number(selectedYear);
$('#age').val(age);
});
})();
</script>
</body>
</html>
now the data from the local address is not being copied to the permanent address.
The server side code is as follows:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
String firstname=request.getParameter("firstname");
System.out.println("First name="+firstname);
String lastname=request.getParameter("lastname");
System.out.println("Last name="+lastname);
String dob=request.getParameter("dob");
System.out.println("Date of Birth="+dob);
String age=request.getParameter("age");
System.out.println("Age="+age);
String sex=request.getParameter("sex");
System.out.println("Sex="+sex);
String subjects=request.getParameter("subjects");
System.out.println("Subject="+subjects);
String localaddresscheckbox=request.getParameter("localaddresscheckbox");
System.out.println("Local Address="+localaddresscheckbox);
String permanentaddress=request.getParameter("permanentaddress");
System.out.println("Permanent Address="+permanentaddress);
try
{
//System.out.println(0);
//Class.forName("oracle.jdbc.driver.OracleDriver");
Class.forName("oracle.jdbc.driver.OracleDriver");
System.out.println(1);
Connection con=DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:xe","Subhankar","oracle07");
System.out.println(2);
Statement st= con.createStatement();
//String sql = "INSERT INTO STUDENT_DETAILS VALUES (firstname,lastname,dob,age,sex,subjects,localaddresscheckbox,permanentaddress)";
String sql="INSERT INTO STUDENT_DETAILS (first_name,last_name,date_of_birth,age,sex,subject,local_address,permanent_address) VALUES ('"+firstname+"','"+lastname+"','"+dob+"','"+age+"','"+sex+"','"+subjects+"','"+localaddresscheckbox+"','"+permanentaddress+"')";
st.executeUpdate(sql);
//
//ResultSet rs=st.executeQuery("select * from studentdetails where studentid="+studentId);
}catch(Exception e)
{
e.printStackTrace();
}
%>
</body>
</html>
You have not set the action attribute.
If you want to submit form to the same page Use
action="<?php echo $_SERVER['REQUEST_URI'] ?>"
Original Issue:
My form is hitting the validation correctly but submitting when it shouldn't be.
Following http://formvalidation.io/examples/ajax-submit/
Viewing my console I don't see any of the log statements in the .on "error" section or the "success" printed out. And the page just posts to itself. With the data in the url. I don't know what I'm missing here as basically it skips all .on statements.
What is going on here?
Remember Validation works just non of the .on statements.
HTML:
<form id="service_path_form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Service Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="service_path_name" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">IP</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="service_path_ip" placeholder="IP" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-8">
<textarea class="form-control" name="service_path_description" rows="3" placeholder="Write a short Description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Enable</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="1" /> Enabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="0" /> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-4">
<button type="submit" class="btn btn-primary" name="validate" value="Validate and Submit">Validate and Submit</button>
</div>
</div>
<input type="hidden" name="created_by" value="{{request.user}}">
<input type="hidden" name="date_created" id = "date_created" value="">
JS:
<script>
$(document).ready(function() {
$('#service_path_form')
.bootstrapValidator({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
service_path_name: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The Service Path Name is required'
},
}
},
service_path_ip: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The destination ip address is required'
},
ip: {
message: 'The ip address is not valid'
}
}
},
service_path_enabled: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'Do you want this service path to be actively monitored?'
}
}
}
}
})
.on('err.form.fv', function(e) {
e.preventDefault();
console.log(e)
console.log('test')
})
.on('success.form.fv', function(e) {
// Prevent form submission
console.log("MADE IT HERE")
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
// Use Ajax to submit form data
console.log("MADE IT HERE")
$.ajax({
url: "/servicepathapi/v1/servicepaths/",
type: 'POST',
data: $form.serialize(),
success: function(result) {
console.log(result)
}
});
})
});
</script>
CURRENT:
Update with suggested upgrade:
I tried #Arkni 's suggestion, while I feel like it's in the right direction with I'm now getting this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'app/scripts/js/bootstrap/bootstrap.min.js' %}" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="{% static 'form_validation/js/formValidation.js' %}" ></script>
<script src="{% static 'form_validation/js/framework/bootstrap.min.js' %}" ></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#service_path_form')
.formValidation({
framework: 'bootstrap',
icon: {
With this output:
FIX:
While checking all of my source files I noticed that I was actually loading jquery 2.0.2 and 2.1.3, removing 2.0.2 fixed the issue.
As you said in your question, you are using FormValidation not BootstrapValidator.
So to solve your problem, replace this
$(document).ready(function() {
$('#service_path_form')
.bootstrapValidator({ // <====
with
$(document).ready(function() {
$('#service_path_form')
.formValidation({ // <====
Some notes:
FormValidation is the new name of BootstrapValidator from version 0.6.0.
BootstrapValidator is deprecated and not supported anymore.
See this guide to upgrade from BootstrapValidator to Formvalidation.
Since you're using FormValidation, you should try to remove jquery.validate.min.js as I am afraid of the confliction.
This jsfiddle works properly:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendor/formvalidation/css/formValidation.min.css">
<form id="service_path_form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Service Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="service_path_name" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">IP</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="service_path_ip" placeholder="IP" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-8">
<textarea class="form-control" name="service_path_description" rows="3" placeholder="Write a short Description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Enable</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="1" /> Enabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="0" /> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-4">
<button type="submit" class="btn btn-primary" name="validate" value="Validate and Submit">Validate and Submit</button>
</div>
</div>
</form>
The scripts:
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#service_path_form')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
service_path_name: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The Service Path Name is required'
},
}
},
service_path_ip: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The destination ip address is required'
},
ip: {
message: 'The ip address is not valid'
}
}
},
service_path_enabled: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'Do you want this service path to be actively monitored?'
}
}
}
}
});
});
</script>
Here is the result showing how it looks like:
I hope it helps you.