I really liked this bootstrap form validator. I wanted to make changes to it so that it can validate a div tag, not only form.
For example, this is how it works:
<form data-toggle="validator" role="form">
...
</form>
So you must have a form tag with data-toggle="validator".
What I would like to do is instead make this work on any div tag with data-toggle="validator", like so:
<div data-toggle="validator" role="form">
...
</div>
However, no matter what I do to [validator.js], validator never works the same.
I thought that I could do a search for "form" inside of [validator.js] and replace it with "div", here are the instances and changes:
I changed:
.filter('[form="' + this.$element.attr('id') + '"]')
To:
.filter('[div="' + this.$element.attr('id') + '"]')
I also changed:
// VALIDATOR DATA-API
// ==================
$(window).on('load', function () {
$('form[data-toggle="validator"]').each(function () {
var $form = $(this)
Plugin.call($form, $form.data())
})
})
To:
$(window).on('load', function () {
$('div[data-toggle="validator"]').each(function () {
var $form = $(this)
Plugin.call($form, $form.data())
})
})
Still not working the same as original code. The rest of the code seems to use base .form-control classes to look for form elements. I am unsure where else to look. Any thoughts on this?
Original code without changes: (HTML + JavaScript):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.js"></script>
</body>
</html>
Related
I create a form where I check the length of a password. If length is <6 then an error message appears.
This message is created by javascript. And here is the problem, the message appears with a line break after every word. I also tried it with ' ' but that doesn't work:(
How do I create the message without the line breaks?
Thanks for your help!
$("#registerPass").on("focusout", function() {
if ($("#registerPass").val().length < 6) {
$(this).removeClass("valid").addClass("invalid");
$('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>
<form style="color: #757575;" action="#!">
<div class="md-form mb-5">
<input type="password" id="registerPass" class="form-control" required>
<label data-error="" data-success="OK" for="registerPass">Passwort</label>
</div>
</form>
Try to add width: 100% to the label element. I checked it and updated codebase below.
$("#registerPass").on("focusout", function() {
if ($("#registerPass").val().length < 6) {
$(this).removeClass("valid").addClass("invalid");
$('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>
<form style="color: #757575;" action="#!">
<div class="md-form mb-5">
<input type="password" id="registerPass" class="form-control" required>
<label data-error="" data-success="OK" for="registerPass" style="width: 100%">Passwort</label>
</div>
</form>
Try adding white-space: nowrap to your css and target the ::after pseudo-element of the label.
https://jsfiddle.net/jvko4wdq/
Alternatively, you may also set the label width as 100% with CSS.
Set 100% width to element, thats it!
<label data-error="" data-success="OK" for="registerPass" style='width: 100%'>Passwort</label>
I'm trying to use Bootstrap Colorpicker to control the color of text from an input field. I want the add-on field attached to an input field but not the default associated hex input box.
Specifically, I have a text input field for Title and I want an add-on Colorpicker box next to the field that will govern its color (as displayed elsewhere). I can't figure out how to just use the Colorpicker add-on box without the standard hex input field.
How do I properly code an add-on for an unrelated input field and still retain the value in JS for use elsewhere?
Thank you!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Style -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-colorpicker.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="control-label">
Title
</label>
<div class="input-group">
<input type="text" class="form-control" name="title" id="title">
<!-- PROBLEM HERE: Doesn't show color box (and value doesn't seem to change) -->
<span id="cp1" class="input-group-addon colorpicker-component" value="#00AABB"><i></i></span>
</div>
</div>
</form>
</div>
</body>
JS
//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/js/bootstrap-colorpicker.js
<script type="text/javascript">
$('#cp1').colorpicker();
</script>
CSS
//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/css/bootstrap-colorpicker.css`
You want to apply the selected color DIRECTLY on the input field content.
(which contains user's text for a "title", not an hex color number).
Okay... But BootStrap's colorPicker actually uses the input field to select a color using the keyboard.
So we have to "hack it" a little...
The good thing is that we can unbind the input's keyup event from colorPicker.
We'll then have to ensure the user's text will remain on colorPicker's changeColor event... And get the color number directly from the API (using .data('colorpicker')) to apply it to the user's text.
So here is the code as you wished it to act: (Run the snippet)
$(function() {
// Initiate the colorpicker
$("#cp").colorpicker();
// Unbind the keyup event from the input (which normally changes the color.)
$("#title").off("keyup");
// Define a variable for the user's text at global scope.
var titleText;
// Get the text value inputed by the user as soon as the colorPicker is accessed.
$('#cp-icon').on("mousedown",function(){
titleText = $("#cp>input").val();
//console.log( titleText );
});
// On color selection, affect the input's text with it.
$("#cp").on("changeColor",function(){
//console.log("change event");
var colorPicked = $('#cp').data('colorpicker').input[0].value;
$("#title").val(titleText).css("color",colorPicked);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="control-label">
Title
</label>
<div class="input-group" id="cp">
<input type="text" class="form-control" name="title" id="title">
<span class="input-group-addon colorpicker-component"><i id="cp-icon"></i></span>
</div>
</div>
</form>
</div>
</body>
Same on CodePen.
You should match the color inside input tag, not inside span
HTML:
<div class="input-group colorpicker-component ">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"></span>
</div>
JS:
$('.colorpicker-component').colorpicker();
I am trying to validate a simple form. But I keep getting this error
Uncaught TypeError: $(...).validate is not a function
Here is my html file with form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cohorts</title>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="trunk/dev/validation.js"></script>
<form id="register-form" class="form-horizontal" name="form" ng-submit="addCohort()">
<div class="form-group">
<label class="control-label col-xs-3">Name:</label>
<input name="email" placeholder="Email Address" type="text" ng-model="formCohort.firstname">
<input class = "btn-btn-primary" id="submit-button" type="submit" value="Sigin up">
</div>
</form>
</body>
</html>
Here is my validation.
$(function () {
$("#register-form").validate({
rules:{
email:{
required: true,
email: true
}
}
});
});
Here is the error in my console:
What am I doing wrong?
Thank you!
You should first include the jQuery library
and than your validate plugin
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="trunk/dev/validation.js"></script>
P.S: make sure you have only one validate plugin!
Additionally, I'd suggest you to include your <script> tags right before the closing </body> tag.
<form id="register-form">
<input name="email" placeholder="Email Address" type="text">
<input type="submit" value="Sigin up">
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script>
jQuery(function($) {
$("#register-form").validate({
rules: {
email: {
required: true,
email: true
}
}
});
});
</script>
I have problem with two datepickers on the same page, they just don't want to work together.
I have found topics connected to mine but they didn't solve my problem:
Conflict with two jquery datepickers on same page
Javascript two datepicker conflict
My fields looks like that:
<div class="row">
<div class="col-xs-6 filter-from">
<input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
</div>
<div class="col-xs-6 filter-to">
<input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
</div>
</div>
Initialization looks like that:
$(document).ready( function() {
$(document).find('#date-filter-from').datepicker();
$(document).find('#date-filter-to').datepicker();
});
Now what happens. First datepicker I click works okey. Then when I click second it doesn't work at all OR when I pick a date it shows error in console:
Uncaught TypeError: Cannot set property 'currentDay' of undefined
I will appreciate any help or ideas.
Use a JQuery selector instead of $(document).find
$(document).ready(function() {
$('#date-filter-from').datepicker();
$('#date-filter-to').datepicker();
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="row">
<div class="col-xs-6 filter-from">
<input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
</div>
<div class="col-xs-6 filter-to">
<input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
</div>
</div>
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)