I am using http://bootstrapvalidator.com/ with visual studio in bootstrap asp.net project.
Problem I am having that I can never get validate button to actually validate like it does in examples, it validates fine when I start typing into textbox, but never validates when I click on button following examples.
Another issue is I don't know how to call my c# method which will get value from textbox after validation was successful, I can call my method on button click, but I want it to happen just after validation was successful .
What I am looking for is simple example how to make submit button validate fields and then call my c# method which will read values from inputs.
I been unable find even single example online , and I dont know much about javascript.
Here is some testing code I have
<div class="form-group" id="nameEmail2">
<div class="form-group">
<label for="inputContactName" class="col-sm-5 control-label">Contact Name </label>
<div class="col-sm-7">
<input type="text" class="form-control" name="fullName1" id="TextBox1" placeholder="Contact Name" maxlength="50"/>
</div>
</div>
<div class="form-group">
<label for="inputContactEmail" class="col-sm-5 control-label">Contact Email <b>*</b></label>
<div class="col-sm-7">
<input type="text" class="form-control" name="email1" id="TextBox2" placeholder="Contact Email" maxlength="50"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" runat="server" onserverclick="submitValidate" class="btn btn-default">Validate</button>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#nameEmail2').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName1: {
validators: {
notEmpty: {
// enabled is true, by default
message: 'The full name is required and cannot be empty'
},
stringLength: {
enabled: true,
min: 8,
max: 40,
message: 'The full name must be more than 8 and less than 40 characters long'
},
regexp: {
enabled: false,
regexp: /^[a-zA-Z\s]+$/,
message: 'The full name can only consist of alphabetical, number, and space'
}
}
},
email1: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
</script>
I have removed most of asp objects and almost nothing runs at server any more, but that didnt help much here is my codebehind method
protected void submitValidate(object sender, EventArgs e)
{
string contactName = Request.Form["fullName1"];
string email = Request.Form["email1"];
System.Diagnostics.Debug.Write("test",email);
}
Found an answer to my own question
http://thuyvk.com/article/validate-form-su-dung-bootstrapvalidator-cho-website-aspnet-224
Be careful with google translate, will translate code into some random html code
Related
I am trying to validate select box using ajax in codeigniter.
I also tried revalidated with bootstrap validator but due to adding revalidated the whole validation is not working.
Thats why I remove revalidated function.
Now I use disabled. It now shows red line error its good. When I select subcategory then it should change in green color but it still show red color error.
Here is screen shot of problem
and second picture:
In this picture a real problem is shown
Here is my code of view file:
<form class="form-horizontal" id="form_professional" role="form" method="Post" action="">
<div class="col-md-6">
<div class="form-group">
<label for="select" class="control-label col-sm-4">Select Subcategory</label>
<div class="col-sm-8">
<select class="subcategory1" id="select" name="framework[]" multiple class="form-control">
</select>
</div>
</div>
</div>
</form>
I am getting data through ajax according to related category.Every thing working fine.But the problem is that when i click on submit button it show red color error on subcategory field because i used excluded = 'disable'.
After the selecting multiple subcategory it still show red line error.It does not change in green line.
$(document).ready(function(){
$('.subcategory1').multiselect({
nonSelectedText: 'Select Subcategory',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth:'300px'
});
});
$('#form_professional').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: ':disabled',
fields: {
professional_building:{
validators: {
regexp: {
regexp: /^[a-zA-Z0-9_\.\s]+$/,
message: 'The building name can only consist of alphabetical, number, dot and underscore'
}
}
},
'framework[]': {
validators: {
notEmpty: {
message: 'Please specify at least one browser you use daily for development'
}
}
}
});
So; I tried to check couple of solutions online but I couldn't find a solution that solve my problem regarding enabling and disabling field validation using bootstrapvalidator.
I have a field that supposed to give error when someone enter a negative number (e.g -4,-100,-545 etc.), and any number that is not numeric (e.g 4.4.4, 4.r, 4t etc).
But I want to put a condition that wont give error when a user type in -999.
Code is working well when a user enter other number that is not a negative and nob-numeric. And if a user enters negative or non-numeric number, error is displayed. The problem when user enters -999 it validate true(don't show error), but if user change number(-999) to other number such as negative number and nun-numeric number, my field validation stop working (meaning don't show any error though it was supposed to show).
So how can I enable and disable field validation or setting up a condition on field validation to solve my problem using bootstrapValidator..???
Hope you guys have already come across with such a problem and I hope you can help me solve the puzzle.
You can try it here: https://jsfiddle.net/os3b0dqx/ to see how it works
my template.html looks like:
<form class="well form-horizontal" action=" " method="post" id="myform">
<div class="form-group">
<label class="col-xs-3 control-label">Length</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="length" name="length" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-1">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#myform').bootstrapValidator({
feedbackIcons: {
validating: 'glyphicon glyphicon-refresh'
},
fields: {
length: {
validators: {
greaterThan: {
value:0,
message: 'The value must be greater than or equal to zero'
},
numeric: {
message: 'The value is not a number',
thousandsSeparator: '',
decimalSeparator: '.'
},
notEmpty: {
message: 'Please fill the length' }
}
},
}
}).on('click keyup input change','[name="length"]',function(){
if ($(this).val() == -999) {
$('#myform').bootstrapValidator('enableFieldValidators','length',false);
}
else{
$('#myform').bootstrapValidator('validateField','length');
//$('#myform').bootstrapValidator('enableFieldValidators','length',true);
// both "validateField" and "enableFieldValidators" doesn't work for me..
}
});
});
change this if ($(this).val() == -999) to if ($(this).val() == '-999')
I have the following jquery code
$().ready(function){
$("#Form").validate({
rules:{
DL:{
minlength:2
}
}
});
}
message:{
DL:{
minlength:"DL should be of at least 5";
}
}
The validation required is that the field DL should have length of 5.
The html code is below
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input
type="text" class="form-control" id="DL" required>
</div>
But the page does not seem to validate, after clicking a button, instead of showing message the page just scrolls upwards.
Here is your solution
https://jsfiddle.net/geradrum/far1fj1n/
All the code have syntax errors.
And the $() should be $(document)
The main problem is that the rules object looks for the element's name and you were using the id of the element.
index.html
<form id="FORM">
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input type="text" class="form-control" name="DL" required>
</div>
<input type="submit" value="Validate!">
</form>
app.js
$(document).ready(function(){
$( "#FORM" ).validate({
rules: {
DL: {
required: true,
minlength: 5
}
},
messages: {
DL: "DL should be of at least 5"
}
});
});
I am trying to validate a bootstrap form with jQuery.
var formSubmit = $("#dl-mg-form-publish").validate({
rules: {
'dl-mg-input-youtube': {
required: true,
url:true,
},
'dl-mg-input-title': {
required: true,
minlength: 6 });
I am trying to validate this:
var videoInformation = {
youtubeID: $('#dl-mg-input-youtube').val(),
title: $('#dl-mg-input-title').val(), }
This is my html:
<form class="form-horizontal dl-mg-form-horizontal" id="dl-mg-form-publish" action="#">
<div class="form-group">
<label for="dl-mg-input-youtube" class="control-label col-xs-2">YouTube Video ID:</label>
<div class="col-xs-6">
<input type="url" class="form-control" id="dl-mg-input-youtube" name="dl-mg-input-youtube" placeholder="Youtube ID">
</div>
</div>
<div class="form-group">
<label for="dl-mg-input-title" class="control-label col-xs-2">Video Title:</label>
<div class="col-xs-6">
<input type="text" class="form-control" id="dl-mg-input-title" name="dl-mg-input-title" placeholder="Video Title">
</div>
</div>
I am new at programming I don't know how to validate first and then submit. I tried using a .click handler but it submits the fields with errors anyway. Please help!
Before submitting your form you need to validate the form. You can do this inside the click event like:
$("#target").click(function () {
// Validate the form first
if (!$("#dl-mg-form-publish").valid()) return false;
// Your form is valid, so continue with you submit logic..
});
More info here: .valid()
EDIT:
Disable auto validation on keypress
Use this options for the validate() method:
$("#dl-mg-form-publish").validate({
onfocusout: false,
onkeyup: false,
// other options here
})
How to clear filled data when user clicks on the cancel button on my jQuery modal form.
Currently when I click on the cancel button it only closes the popup box and when I reopen it previous filled data is still stored.
Please advice
<form id="myform2" data-toggle="validator" class="form-horizontal" role="form" method="POST" action="#">
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Full Name</label>
<input required type="text" class="form-control" name="full_name"
value="{{ old('full_name') }}">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Username</label>
<input required type="text" class="form-control" name="username"
value="{{ old('username') }}">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Password</label>
<input pattern=".{5,10}" required title="5 to 10 characters"
type="password" class="form-control"
name="password" value="{{ old('password') }}">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel
</button>
</div>
</form>
I have used bootstrap validations as well for form fields.
$(document).ready(function () {
$('#myform2').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
full_name: {
validators: {
notEmpty: {
message: 'The Full Name field is required'
},
stringLength: {
min: 5,
max: 15,
message: 'The Full Name must be more than 5 and less than 15 characters long'
},
Edit
Here is my password validation
password: {
validators: {
notEmpty: {
message: 'The Password field is required.'
},
stringLength: {
min: 5,
max: 15,
message: 'The Password must be more than 5 and less than 15 characters long'
}
}
}
Just assign an id="reset" to cancel button
<button type="button" class="btn btn-default" id="reset" data-dismiss="modal">Cancel</button>
and following code do the trick
$(document).ready(function() {
$("#reset").click(function() {
$("input").val("");
});
});
Fiddle Example
Or Better approach, use form id="myform2"
$(document).ready(function() {
$("#reset").click(function() {
$(':input','#myform2').val("");
});
});
Fiddle Example with form id
OR
With bootstrap validation plugin, no need of above code and any change in cancel button, just add following script above your bootstrap validation script.
$('#myModal').on('hidden.bs.modal', function(){
$(this).removeData('bs.modal');
$('#myform2').bootstrapValidator('resetForm', true);
});
$('#myform2').bootstrapValidator({
//Validation code comes here
});
Note: Here I'm assuming that modal id is #myModal if not you have to change it to your modal id, this will reset the form with cancel button when modal closed and reopen again.
With Bootstrap validation example
With Bootstrap Validation example (auto reset inputs with preload values in form on modal load)
add new id attribute to cancel button
<button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel
</button>
<script type="text/javascript">
$(document).ready(function() {
// clear input values
$('#cancel').on('click', function() {
$('form').find('input').val('');
});
});
</script>