i need to write a javascript or a jquery function to similar the required validation in html5 to display validation-bubble-message but i don't want to use the required tag because i'm using custom validators on buttons
any suggestions?
note that i'm asp.net with vb
<p>
<label for="username" class="uname" data-icon="u" > Your username </label>
<asp:Textbox runat="server" id="username" name="username" type="text" placeholder="myusername"/>
</p>
<p>
<label for="password" class="youpasswd" data-icon="p"> Your password </label>
<asp:Textbox runat="server" id="password" name="password" type="password" placeholder="eg. X8df!90EO" />
</p>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function validate(form) {
var valid = true;
$(form).children().filter('input[validate=required]').each(
function() {
if (this.value == '') {
alert("A value for " + this.getAttribute('title') + " is required");
valid = false;
}
}
);
return valid;
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
<asp:Textbox runat="server"
id="username"
name="username"
placeholder="myusername"
validate="required"
title="Username"/>
<input type="submit"/>
</form>
</body>
</html>
"validate" is a made up attribute, you can use anything.
I suggest using http://jqueryvalidation.org/
particularly look at the example given at http://jqueryvalidation.org/documentation/
This doesn't give you nice "bubbles" out of the box, but a clear error message below the input field, and may be useful for you - or at least a good starting point.
The demo shows that apparently this doesn't interfere with existing html5 capabilities of the browser. Also, the author explains why he thinks it's not such a great idea to implement this kind of validation on your own, although the implementations shown here in other answers may be perfectly working for you.
As I'm not familiar with ASP, I don't know whether it takes care of "automatic" server-side validation in this case (maybe not). So if ever the user manages to get the form submitted with empty fields (not hard, maybe using a GET URL, or manipulating the page before submit), your server-side code should be able to deal with that and, for example, redirect the user to the form again, ideally also showing an appropriate error message.
Related
Literally, I want to turn off password saving popup in the browser.
Many answers said that use autoComplete. But I think autoComplete doesnt' work anymore.
I want to know the recent technic for this problem.
Could you recommend some advice for this?
Thank you so much for reading it.
Here's how I do it
On submit:
Save the password from the input field
Clear the password input field
Set the input field to type="text"
handle the form submission using AJAX
This works 100% - but is a little fiddly - though, easy enough
here's how you could handle a bit easier than I described - given you aren't doing any AJAX in your login
<form action="/login" method="post" name="loginform">
<input type="text" name="username" />
<input type="password" name="input_password" />
<input type="hidden" name="password" />
<input type="submit" value="login" />
</form>
document.forms.loginform.addEventListener('submit', function() {
const {
input_password,
password
} = this.elements;
password.value = input_password.value;
input_password.value = '';
input_password.type = 'text';
});
If your login already does some AJAX, then the principal is the same, but you won't need a hidden field
it's not something you can do in your own code, it's a browser behavior, You can only achieve this by changing your browser settings. disable browser password manager
If you want to do it in your code, I think you can try something like, do not give your input element attributes name, id, type common value - do not name them as password, email, etc, to cheat the browser build-in password saving feature.
I have a mobile signup form that contains HTML input elements for the user's username, password, and password confirmation fields. Since this is a mobile web app and I'm trying to conserve screen space, I've elected to forego putting HTML labels above each of these elements and instead utilize placeholder attributes to signal what to enter in each field:.
<input id="id_username" placeholder="Choose a username" type="text" />
<input id="id_password1" name="password1" placeholder="Choose a password" type="password" />
<input id="id_password2" name="password2" placeholder="Confirm password" type="password" />
Initially I added a bit of JavaScript to put the focus on the username field when the user arrives at the page:
<script type="text/javascript">
document.getElementById("id_username").focus()
</script>
This worked fine except that in older versions of the default Android browser, this causes the placeholder to disappear. Since the lack of a placeholder (and label) may cause the user to not be clear on what to enter in that field, I took the JavaScript out. However, even without that JS, I'm noticing that the Android browser still puts the focus in that first form field which again deletes the label. Is there any way that I can code the page so that I'm guaranteed that no browser (including the default Android browser) will put focus on any of these fields? Techniques that wouldn't require additional libraries would be preferable as I'm trying to keep my page size and additional requests to a minimum.
Thanks.
Sometimes it is faster to write some simple functionality by your hands. Look at the example at js fiddle. If you want you can replace jquery with native javascript.
https://jsfiddle.net/ShinShil/y7o8mrwh/2/
var placeholder = 'enter something';
$(document).ready(function() {
$('.placeholder').val(placeholder);
$('.placeholder').focusin(function() {
if($(this).val() == placeholder && $(this).hasClass('opacity')) {
$(this).val('');
$(this).removeClass('opacity');
}
});
$('.placeholder').focusout(function() {
if($(this).val() == '') {
$(this).val(placeholder);
$(this).addClass('opacity');
}
});
});
If your controls are in forms, you can loop over all controls in all forms and call their blur method:
function blurAll() {
[].forEach.call(document.forms, function(form) {
[].forEach.call(form.elements, function(element) {
element.blur();
});
});
}
<body onload="blurAll()">
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
</body>
Note that for IE8 you'll need a polyfill for Array.prototype.forEach.
Edit
Perhaps a simpler solution is to use document.activeElement:
function blurActive() {
if (document.activeElement && document.activeElement.blur) {
document.activeElement.blur();
}
}
<body onload="blurActive()">
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<p>Click on the button, then on an input to give it focus. It will be blurred in 5 seconds.</p>
<button onclick="setTimeout(blurActive,5000);">Blur active in 5 seconds</button>
</body>
I currently have a working code that just allows users through once they click a button to accept terms. I would like to integrate a password field and accept button that would only allow someone through if the password is correct.
Here is my current working code with the simple button:
Agree to Connect:
<br>
<br>
<form method="post" id="login" action="http://10.0.0.1:5280/">
<input type="hidden" name="accept_terms" value="yes">
<input type="hidden" name="redirect" value="http://www.anderson1216.com/wifi-success.html">
<input type="hidden" name="mode_login">
<input type="submit" value="Accept Terms of Use and Connect">
</form>
<br>
//agreement text here
<br>
<br>
We thank you for your understanding and cooperation.
<br>
<br>
<form method="post" id="login" action="http://10.0.0.1:5280/">
<input type="hidden" name="accept_terms" value="yes">
<input type="hidden" name="redirect" value="http://www.anderson1216.com/wifi-success.html">
<input type="hidden" name="mode_login">
<input type="submit" value="Accept Terms of Use and Connect">
</form>
this is a simple password form that I found:
<head>
<script type="text/javascript">
function isValid(){
var password = document.getElementById('password').value;
if (password == "password123")
{alert('Correct!')
else
{alert('Wrong Password')}
}
</script>
</head>
<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid();">
</form>
In order for the code to work, the first statement from the first block of code needs to be included somewhere to tell the router that the person accepted, then I want it to redirect to another website after they click the button. No alert is needed for a correct password, just the incorrect ones. Any suggestions?
I would SERIOUSLY advise not having the password listed in the js!! This is able to be seen by anyone looking at the source code. You need to implement a more secure password system with a hashed and salted password held in a secure database and checked via an AJAX call or PHP.
It looks like you are wanting to put this on a home router, possibly as a landing page? If you can elaborate a bit more I might be able to provide more help.
If you are trying to prevent someone from accessing the site unless they have know a secret password, then this is not the way to go about it. You would want to authenticate the user on the server side, not the client side, because anyone with limited knowledge of JavaScript can spoof authentication on the client side using the developer console.
If, however, you are just wanting to make certain that a human is agreeing to the terms of the agreement by entering in an arbitrary known password, then this method is fine.
I would agree with gavrig above to hash and salt them for safety.
But if i got your question right, here's a fiddle i put together to solve it. I've mixed jquery and javascript intentionally.
Agree to Connect:
<br>
<br>
//agreement text here
<br>
<br>
We thank you for your understanding and cooperation.
<br>
<br>
<form method="post" id="login" action="http://10.0.0.1:5280/">
<input type="password" id="password" name="password">
<input type="hidden" name="accept_terms" value="yes">
<input type="hidden" name="redirect" value="http://www.anderson1216.com/wifi-success.html">
<input type="hidden" name="mode_login">
<input type="submit" value="Accept Terms of Use and Connect">
</form>
$('form').on('submit', function(e){
e.preventDefault();
var password = document.getElementById('password').value;
if (password == "password123")
{
this.submit();
}
else
{
alert('Wrong Password');
}
});
https://jsfiddle.net/tL7qcc5n/2/
NoCatSplash does not support authentication. Any user could simply bypass your authentication by manually posting to http://10.0.0.1:5280/
If you are serious about authentication, you should use another method, such as using a Radius server. This could even be installed on the router itself, given that it has good enough hardware to support it.
Is there any way to manipulate Chrome settings with the help of JavaScript or jQuery? I want to disable the save password pop-up bubble using JavaScript. How to do this?
Now I am going to give answer on my own question.
It can be done in both chrome as well as in mozilla fire fox.
For Chrome
First of all you must have to remove the attribute "password" of input type.
The main reason behind this is when you take input type = "text" and input type = "password" major browser shows that pop up. Because browsers have inbuilt functionality to show that pop up when you take input type = "password".
Now we can manipulate chrome from this.
Here is an example
<html>
<head>
<title> Remove Save Password Pop Up For Chrome </title>
<style>
#txtPassword{
-webkit-text-security:disc;
}
</style>
</head>
<body>
<input type="text" id="txtUserName" />
<br />
<input type="text" id="txtPassword" />
<br />
</body>
</html>
It is css property that is used for changing text into bullets.
For Mozilla
You cannot do this in mozilla. Because -moz-text-security is obsolete. It is not working in mozilla.
But we can also manipulate mozilla.
Now there are list of character codes in html that is supported in all of the major browsers.
From that character code for bullet is '•'. When you write this code in html it will print bullet like this "•"
Now we can replace the text field with these bullets
But there is one limitation for this. You cannot print bullets inside the text box. But there is also solution for that limitation. Because everything is possible in programming world.
For that limitation we can make fake div that shows bullets when you write password.
Here is an example.
<html>
<head>
<title> Remove Save Password Pop Up For Mozilla </title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
<script>
function RemoveSavedPassword() {
if (jQuery.browser.webkit == undefined) {
inputValue = $('.real-input').val();
numChars = inputValue.length;
showText = "";
for (i = 0; i < numChars; i++) {
showText += "•";
}
$('.fake-input').html(showText);
}
}
</script>
</head>
<body>
<div class="input-box">
<label>Enter password:</label>
<div class="fake-input"></div>
<input type="text" onKeyUp="RemoveSavedPassword()" class="real-input">
</div>
</body>
</html>
Now there is magic of CSS. Magic means power of margin, padding, opacity and position attribute we can manipulate user.
Here is the link:
http://codepen.io/jay191193/pen/bVBPVa
Security Issue
For security issue of input type="text" instead of input type="password" you can visit this link:
Security issue of changing type="password" into type="text"
There isn't a way to change Chrome settings directly from JavaScript, so the following answer will focus on how to prevent that dialog from appearing for a specific HTML form.
There aren't any great ways to do this as far as I can tell - from what I've read, the HTML5 autocomplete="off" attribute gets ignored in Chrome, so it will prompt to save the password even if you supply the attribute.
There is a workaround though - if you set the password field to be readonly until it is focused, Chrome will not prompt to save the credentials. Unfortunately there is no good clean solution that I know of, so that's why the solution I am posting is a little hacky.
Please view the JSFiddle in Chrome and try submitting each form to see the solution in action (you will need to reload the fiddle after you submit each time): https://jsfiddle.net/g0e559yn/2/
Full Code:
/* Chrome does not ask to save the password from this form */
<form id="form1" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" readonly onfocus="$(this).removeAttr('readonly');" />
<br />
<button type="submit" form="form1" value="Submit">Submit</button>
</form>
/*Chrome asks to save the password from this form */
<form id="form2" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" name="psw" />
<br />
<button type="submit" form="form2" value="Submit">Submit</button>
</form>
I've had success preventing this popup by adding the type="button" attribute to the <button> that is kicking off the event.
I had understood browsers to accompany the "Do you want to save this login?" popup with any form submit, but I get this popup even when using a button outside a <form>. I am guessing that since a button by default is <button type="submit">, in some way clicking it is recognized as a form submit even if you're not using it in a <form>.
Tested in recent versions of Firefox, Chrome, Edge.
I think I found rough, but working method to prevent browser saving password prompt. It might be not really beautiful solution, but it worked for me.
Made with jQuery.
Hope it helps.
$('#modified span').on('click', function(e){
e.preventDefault();
$('#modified').submit();
});
//Clear the form on submit
$('form').on('submit', function(){
$('form input[type="text"], form input[type="password"]').val('');
});
#modified input[type="submit"]{
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<h1>Browser IS asking to save password</h1>
<input type="text" placeholder="Login"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Submit"/>
</form>
<form id="modified">
<h1>Browser IS NOT asking to save password</h1>
<input type="text" placeholder="Login"/>
<input type="password" placeholder="Password"/>
<span>
<input type="submit" value="Submit"/>
</span>
</form>
This method work for me in chrome and mozilla, Using this in my projects:
<input type="text" name="email" onfocus="this.removeAttribute('readonly');" id="email" placeholder="Email Address" class="form-control" email="required email" required="">
Add onfocus="this.removeAttribute('readonly');" in your input type after this it wont remember any saved password.
For Chrome and Firefox 2018
ONLY IF YOU USE AJAX:
After you check if login and password is ok, clear password input field:
$.post("/auth", {login: $("#login").val(), pass: $("#password").val(); }, function(data){
if (data == "auth is ok"){
// clear password field
$("#password").val(''); // <-- this will prevent browser to save password
}
});
use Ajax
$.post("process.php", {
user: txtuser,
pass: txtpass
}, function(data) {
//alert(data);
async: true //blocks window close
//location.reload();
//OR
//window.location.href = "your link";
});
There's another way to do this. I think it works on all frameworks.
As I've solved it in Java Spring Boot, I'll first give the solution for java spring boot projects.
You can turn off autocomplete by using autocomplete="off" attribute. But in many modern browsers this attribute does not make any effect. So, in this case, if we use one more thing under the input field then this problem can be fixed.
<input type="text" readonly id="username" name="username">
in spring boot we should write:
<html:text property="username" styleId="username" readonly="readonly"></html:text>
Now, by writing readonly we have disabled the save prompt. We must also use "text" as type for the password. So, it will be like this:
<input type="text" readonly id="password" name="password">
<html:text property="password" styleId="password" readonly="readonly"></html:text>
But this will make the password field visible. We need to show "********" in the password field. For this we will use a tricky method that is, we will use a font that makes each character look like small dots. So, we need to change into css content.
Download the “security-disc” font files/images from here. In spring boot, download the “security-disc” font/images files then define the font files inside WebContent under WEB-INF/fonts and font images under WEB-INF/images.
<style>
#font-face {
font-family: 'text-security-disc';
src: url('../WEB_INF/fonts/text-security-disc.eot');
src: url('../WEB_INF/fonts/text-security-disc.eot?#iefix') format('embedded-opentype'),
url('../WEB_INF/fonts/text-security-disc.woff') format('woff'),
url('../WEB_INF/fonts/text-security-disc.ttf') format('truetype'),
url('../WEB_INF/images/text-security-disc.svg#text-security') format('svg');
}
input.password {
font-family: 'text-security-disc';
width:15%;
margin-bottom:5px
}
</style>
If your directory path isn't found you can use
URL('<%=request.getContextPath()%>/WEB-INF/fonts/text-security-disc.eot');
Method 2:
Another method by which we can use to remove the password, also other values from the form. The values are stored in the browser in the form of a cookie, so if the cookies are deleted then the password, as well as other values, also deleted. So only we have to add a function to delete the cookies.
<script type="text/javascript">
function savePass() {
passVal = "password = "
+ escape(document.Frm.passWord.value)
+ ";";
document.cookie = passVal
+ "expires = Sun, 01-May-2021 14:00:00 GMT";
document.getElementById("show").innerHTML =
"Password saved, " + document.cookie;
}
function dltPass() {
document.cookie = passVal
+ "expires = Sun, 01-May-2005 14:00:00 GMT";
// Set the expiration date to
// removes the saved password
document.getElementById("show").innerHTML =
"Password deleted!!!";
// Removes the password from the browser
document.getElementById("pass").value = "";
// Removes the password from the input box
}
</script>
Here, we added an older expiration date in dltPass function. So, the cookie will be thought of as expired and will be deleted.
Finally, another simplest way of preventing browsers to remember password is, using autocomplete="new-password". By this the browser will give random password suggestions while filling the password field in any form. So the actual password will not be saved in the browser.
So, i'm really new to HTML and javascript, and I want to take values from a form and process them with a script. I have a couple of fields including username, password, and two confirm password fields in HTML. With javascript I want to collect the username, and check if the password field is filled out. If it is, I want to make var ispass equal to 'yespass' or 'nopass'. When I submit the form, I want to go the url http://www.example.com?un=username&pass=yespass (or nopass).
Javascript:
<script language="javascript" type="text/javascript">
function processFormData(){
var user = document.getElementById('username').value;
var pass = document.getElementById('password').value;
var ispass;
if (pass.length > 0){
ispass = "yespass";
}else{
ispass = "nopass";
}
return "http://www.example.com?un=" + user + "&pw=" + ispass;
</script>
HTML:
<form onsubmit="window.location.href=processFormData();">
Please enter your current e-mail address and password below.<br><br>
<input type="text" id="username" placeholder="E-mail Address"><br><br>
<input type="password" id="oldpassword" placeholder="Old Password"><br><br><br>
Please type your new password below:<br><br>
<input type="password" id="newpassword1" placeholder="New Password"><br><br>
<input type="password" id="newpassword2" placeholder="Confirm New Password"><br><br>
<input type="submit" id="gobutton" value="Reset Password"/>
</form>
I cannot figure out a proper way to do this, because this does not seem to be working at all. Any suggestions or recommendations?
You could pull this off with a hidden form field and an onchange event:
<input type="hidden" id="ispass" value="no" onchange="checkPass(this);" />
This input would go in your form. Then on your password field, add an onchange handler:
function checkPass(input) {
document.getElementById("ispass").value = "yes"
};
Also, if you set the method on your form, submitting the form can generate the url based on the form inputs:
<form method='get' action='...' />
Here's a jsfiddle that demonstrates the result.
Also, if you're new to javascript, you may want to look into a library like jQuery to simplify some of your interaction with the page. It's really easy to learn, and there's a great community around it to help with any problems you might run into.
HTH,
Aaron