I have made a form with Material Design components.
My TextField floating labels float when AutoFill fills the inputs, but not when a user types in them.
function fillFields() {
$("#passwordTextField").val("test");
$("#usernameTextField").val("test");
}
p.highlight-red-on-error {
transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
div.mdc-text-field--invalid~p.highlight-red-on-error {
color: #b00020;
}
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<div>
<div class="mdc-text-field">
<input type="text" id="usernameTextField" name="username" class="mdc-text-field__input" pattern="[A-Za-z]*" required minlength=3 maxlength=32 data-mdc-auto-init="MDCTextField">
<label for="usernameTextField" class="mdc-floating-label">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="highlight-red-on-error">Username must be between 3 and 32 characters and contain only alphanumeric characters.</p>
</div>
<br>
<!-- password field -->
<div>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input type="password" id="passwordTextField" name="password" class="mdc-text-field__input" pattern="[A-Za-z!%^&*$?~`=+-_()]*" required minlength=8>
<label for="passwordTextField" class="mdc-floating-label">Password</label>
<div class="mdc-line-ripple"></div>
</div>
<p class="highlight-red-on-error">Password must be at least 6 characters. Some special charcaters are not allowed</p>
</div>
<p>
Typing in the fields doesn't float the labels, but using autofill does.
</p>
<button onClick="fillFields()">Fill fields (doesn't float labels)</button>
<script>
window.mdc.autoInit();
// from https://github.com/material-components/material-components-web/tree/master/packages/mdc-auto-init#using-as-part-of-material-components-web
</script>
</body>
As you can see, neither editing the fields through JavaScript, nor typing in them floats the label. Only using auto-fill does. In addition, the autoInit(); doesn't seem to work.
I found that using autoInit(); didn't work for some reason, so I had to manually initialise the components.
An example (using jQuery) for TextFields is:
$('.mdc-text-field').each(function (i, obj) {
mdc.textField.MDCTextField.attachTo(obj);
});
The above code applies the correct properties and methods, etc. for all items with the class mdc-text-field
I believe that the data-mdc-auto-init has to be added to the top level mdc-text-field and not the input field. I just ran into this myself and adding it to the top level and calling mdc.autoInit() after the onload event on the page solved the issue.
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 using bootstrap popover to display if password is less then 6 character.
It works fine but when I click in text it display popover even value of text box is valid. how to hide popover when length of text box is valid
<head>
<title>popover example</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap popover Example</h1>
<div>
<input type="password" id="password1" placeholder="password" data-toggle="popover" >
</div>
</div>
Here is my js code I remove div with popover when length is valid . But problem is text box displays popup when I click in text . I want to display popover only when length is less then 6 .
<script>
$(function ()
{
debugger;
$('#password1').blur(function(){
debugger;
if($('#password1').val().length<6){
$("#password1").popover({
title:"test",
content:"Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
}else{
$("#password1").parent().removeClass('popover');
}
});
})();
</script>
Thanks for your help.
You should use the hide function of popover
$("#password1").popover('hide')
Use .popover('destroy') instead of .popover('hide') since if you click again on the textbox, it will keep showing you again even if the characters are more than 6.
$(function() {
debugger;
$('#password1').blur(function() {
debugger;
if ($('#password1').val().length < 6) {
$("#password1").popover({
title: "test",
content: "Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
} else {
$("#password1").popover('destroy');
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h1>Bootstrap popover Example</h1>
<div>
<input type="password" id="password1" placeholder="password">
</div>
</div>
Please check this
$(function ()
{
debugger;
$('#password1').blur(function(){
debugger;
if($('#password1').val().length<6){
$("#password1").popover({
title:"test",
content:"Must be 6 characters long! Must contain a capital letter"
});
$("#password1").popover('show');
}else{
$("#password1").popover('destroy');
}
});
$('#password1').click(function(){
if($('#password1').val().length>5){
$("#password1").popover('destroy');
}
});
})();
I'm an experienced .NET developer, and am "getting there" with jQuery and Bootstrap. I'm attempting to integrate jQuery form validation (jquery.validator.js add-on), and can't seem to get the basics in place. I feel like I'm doing exactly what the documentation specifies in order to make a basic example work, but I'm obviously missing something.
Here's my page includes:
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/datepicker3.css" rel="stylesheet" type="text/css" />
<link href="/Content/site-style-main.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script>
<script src="/Scripts/site-script-step1validate.js" type="text/javascript"></script>
Here's the relevant HTML pertaining to one of the fields to be validated, and the form:
<form name="aspnetForm" method="post" action="Step1.aspx?RecertID=1" id="aspnetForm" class="form-horizontal" enctype="multipart/form-data" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">First Name</span>
<input name="ctl00$PageContent$RecertVFCFormView$ProviderFirstName" type="text" maxlength="256" id="ProviderFirstName" class="form-control" />
</div>
</div>
<a id="ExitButton" class="btn btn-primary btn-sm" href="javascript:__doPostBack('ctl00$PageContent$RecertVFCFormView$StepController$ExitButton','')">
<i class="glyphicon glyphicon-new-window" aria-hidden="true"></i> Exit
</a>
</form>
And here's what my jQuery looks like (site-script-step1validate.js):
$(document).ready(function () {
$('#ProviderMedLicenseExpiration').datepicker();
$('#aspnetForm').validate({
onsubmit: false,
rules: {
ProviderFirstName: {
required: true
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
}
});
$('#ExitButton').click(function (e) {
var isValid = $('#aspnetForm').valid();
if (!isValid) {
e.preventDefault();
}
});
});
At this point my expectation is simply that without that first name field populated, the form will fail to submit; it does not. I know that my ExitButton.click function is being reached and that isValid winds-up as true.
Seems pretty straight-forward and I can't quite make-out what I'm missing. Likely something very simple.
The problem is that ProviderFirstName rule must match with the name of the input control you're trying to validate. If you check the HTML you'll see that name is ctl00$PageContent$RecertVFCFormView$ProviderFirstName. Because of this the rule is just ignored.
A possible solution if you're using asp.net 4+ is to define ClientIDMode for TextBox control as static to avoid .net engine to change the id based on parent container.
Another option that may goes against your training purposes is adding required to TextBox markup and remove the custom rule ProviderFirstName. It would have the same end result and definitively would make more sense on a real scenario.
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.)