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');
}
});
})();
Related
I am trying to remove any white space while a user in entering something into the input box. I tried having three separate methods at first: regex to remove spaces when text is pasted, one for when the space bar is pressed, and a simple trim. NOTE: it is required that I use class to call methods. Not sure where to go from here... I appreciate the help!
(function () {
class Digit {
// when user enters keys, do not allow spaces
method2(userInput) {
console.log({userInput});
console.log("formatInput");
const input = userInput.target.value;
console.log(input.length);
if (!input.length) return;
if (userInput.which === 32) { // 32 is space key
console.log("this is a space");
userInput.value = this.method1();
}
}
method1() {
console.log("trimthis input");
return userInput.trim();
}
// when user pastes input remove spaces
method3() {
console.log("formatPaste");
const reg = new RegExp(/\s+/, "");
console.log(this.userInput);
return this.userInput.replace(reg, "");
}
}
const userInput = document.querySelector("#inputNumber");
console.log("User inputs", {userInput});
const digitObject = new Digit();
console.log(digitObject);
userInput.addEventListener("keyup", function() { digitObject.method2(); }, false);
digitObject.method3();
}());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Numbers App</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ASSIGNMENT: create page where user can type/save numbers only, css grid -->
<div class="wrapper">
<!-- simple form with number input and submit function, auto trim spaces -->
<form>
<div class="form">
<div>
<input class="input--number has-float-label go-bottom Digit" id="inputNumber" placeholder="Enter Number" type="text" required />
<label for="inputNumber">Input</label>
</div>
<div class="btn--group">
<input type="button" value="Post" class="btn post" title="Post">
<input type="button" value="Clear" class="btn clear" title="Clear">
</div>
</div>
</form>
<!-- saved numbers table with date submitted -->
<!---->
</div> <!-- end wrapper -->
<!-- footer -->
<!-- Javascript -->
<script src="script.js"></script>
</body>
</html>
Use the event input to capture every kind of changes and the following regexp / /g
document.getElementById('textfield').addEventListener('input', function() {
this.value = this.value.replace(/ /g, '');
});
<input id='textfield'>
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.
I am trying to create a prompt dialog box using alertifyjs that has multiple input boxes. I have managed to create the dialog box to show the multiple boxes but I cant seem to make a reference to the inputs that user provides.
I want to write if statement that carries out action based on user input when they press OK. However, the OK button doesnt seem to be working and also the if-statements don't work as well. I am not sure what I might be doing wrong, can someone please help me.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css"/>
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;" >
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value"/>
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value"/>
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title',"Update");
</script>
</body>
</html>
Link to JSfiddle: http://jsfiddle.net/1qouxdkc/4/
In your script you call a function named updateListItems(inpOneVal,inpTwoVal);
As that function is not declared anywhere, it errors, so with that temporarily commented out, it works.
Stack snippet
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/alertify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/css/themes/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/alertifyjs#1.11.1/build/alertify.min.js"></script>
</head>
<body>
<div style="display:none;">
<div id="dlgContent">
<p> Enter Value One </p>
<input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
<p> Enter Value Two </p>
<input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
</div>
</div>
<!-- the script -->
<script>
var dlgContentHTML = $('#dlgContent').html();
$('#dlgContent').html("");
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
var inpOneVal = $('#inpOne').val();
var inpTwoVal = $('#inpTwo').val();
//updateListItems(inpOneVal,inpTwoVal);
if (inpOneVal == "test" && inpTwoVal == "test") {
alertify.success('Successful');
} else {
alertify.error('Wrong')
}
}).set('title', "Update");
</script>
</body>
</html>
I was trying to add placeholder in <p> tag, I tried the following way but dint work out.
I need a placeholder in the <p> tag, it should be replaced with the value in input text.
JS fiddle Link
$( "#incharge" )
.keyup(function() {
var value = $( this ).val();
$( "p#incharge" ).text( value );
})
.keyup();
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="incharge" name="incharge" title="Provide The manager in charge name">
<br>
<br>
<p id="incharge" placeholder="Some Placeholder text comes here"></p>
You can fake some kind of placeholder with :empty, :focus and pseudo-elements:
p:empty:not(:focus)::before {
content: attr(data-placeholder);
}
<p data-placeholder="Insert text here..." contenteditable></p>
You can't use placeholders out of inputs. To put a text in a paragraph, simple text:
<p id="incharge">Some Placeholder text comes here</p>
So the snippet looks like this
$( "#incharge" )
.keyup(function() {
var value = $( this ).val();
$( "p#incharge" ).text( value );
});
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="incharge" name="incharge" title="Provide The manager in charge name">
<br>
<br>
<p id="incharge">Some Placeholder text comes here</p>
You can only use the placeholder attribute for input elements.
You can, however, (1) get the value the value of the placeholder attribute whenever the content is empty and (2) add that value to your paragraph instead of the content of the input element. If I interpret your question correctly, that is what you're trying to do.
You could achieve that effect by using the following code :
$( "#i-incharge" )
.keyup(function() {
var input = $( this ),
output = $( 'p#p-incharge' ),
inputvalue = input.val();
if(inputvalue === '') {
inputvalue = input.attr( 'placeholder' );
}
output.text( inputvalue );
})
.keyup();
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="i-incharge" name="incharge" title="Provide The manager in charge name">
<br>
<br>
<p id="p-incharge"></p>
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.)