I have this link and if you click submit without filling any of the fields you get three validations but i have no js files included so where is this coming from
Here is the all the HTML
<div class="content">
<div class="page row nobor">
<div class="three_col wide row">
<div class="title">
</div>
<div class="column">
<h2>email sign up</h2>
<div class="inner">
<form method="post" action="/signup_complete" id="signup_form">
<p>
stuff
</p>
<p class="row">
<label>First Name <span class="req">*</span></label>
<input type="text" id="first_name" name="first_name" required="true">
</p>
<p class="row">
<label>Last Name <span class="req">*</span></label>
<input type="text" id="last_name" name="last_name" required="true">
</p>
<p class="row">
<label>Email <span class="req">*</span></label>
<input type="text" message="Please provide your email address." required="true" value="" name="email">
</p>
<p class="row nopad nomarg"><input type="submit" value="submit" class="sub_fbut submit" name="submit"></p>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div>
Basically I need to add more validation to not allow less then 3 letters but i have no idea where this is coming from and how do i alter...ideas?
This is coming from the HTML5 browser capabilities. Meaning this validation only works on modern browsers that support validation attributes such as "required", check out some examples here.
If you want browser compliant validation i suggest this plug in. Just remember people can disable JS so if you have sensitive data validate it server-side.
Remove the required="true" from your <input> tags to get rid of that validation.
if you click submit without filling any of the fields you get three
validations but i have no js files included so where is this coming
from
It looks like you are using HTML5 forms code here.
It uses required="true" or required
HTML5 browsers are interpreting this correctly.
Read more: http://diveintohtml5.ep.io/forms.html#required
Basically I need to add more validation to not allow less then 3
letters but i have no idea where this is coming from and how do i
alter
If you need some simple validation, you could do something like this
$('#first_name').blur(function(){
if($(this).val().length < '3'){
alert('You must enter three characters');
}
});
Example: http://jsfiddle.net/jasongennaro/ZEjEq/
This is just an example. You could do something like this on submit().
Also, you should validate content on the server side, too. Just to be sure!
Related
I need someone to please tell me how to remove this auto-suggested text below the input field. I have tried autocomplete="off" , autocomplete="false". I've also placed <form autocomplete="off"></form> in form tag.
Anyone with a solution please help.
<div class="col-md-6">
<div class="form-group">
<span class="label">Enter Postal Code</span>
<input type="text" class="form-control" id="search_input" autocomplete="off" placeholder="Type postal code ..." required>
</div>
</div>
Here you can see which browsers support the autofill attribute CaniUse. Here is a simple work around from this source: Turning off form-autocompletion.
You can work around with autofill="new-password"
"If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password"."
<form method="post" action="/form">
<div>
<label for="cc">Enter Postal Code:</label>
<input type="text" id="cc" name="cc" autocomplete="new-password">
</div>
</form>
Lastly, instead of pairing a <span> with the input element, it is common practice to use the <label> element. Please read more here label
Apply autocomplete="off" to your form not the input box.
Below is my code:
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
whenever voiceover highlights the input text field it reads "You are currently on text field, inside web content. To enter text in this filed, type. To exit web area,.."
and when I Start typing it says nothing.
and checked other appilcation or websites it reads what i am typing.
but in my case its not reading.
Please help if anyone knows the solution.
Add title attribute to the input element and provide additional text.
Adding aria-label to the input elements should also be picked by the screen readers.
http://pauljadam.com/demos/title-aria-label.html provides details on how different browsers and screen readers treat these attributes.
Your code seems pretty fine. I tried with a chrome plugin called ChromeVox everything seems to be fine except that add the lang attribute to the parent html tag and enclose everything in a body tag some thing like this.
<html lang="en-US" style="height: 100%;">
<body>
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
</body>
</html>
I'm not sure if this'll help, but You may try to update fields value attribute, every time user modify text field. Something like that:
document.querySelectorAll('input[type="text"]').forEach(function(v){
v.addEventListener('input', function(){
v.setAttribute('value', v.value);
});
});
But I wish someone provide better answer, without using extra JavaScript.
I want to have a hidden field in my code as below, that bots will fill in when submitting it. But i want javascript code to look at that field only for a value and if there is a value, create an alert or hide the submit button so the bot cannot signup at all.
I just tailored a mailchimp form to use.
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
</style>
<div id="mc_embed_signup">
<form action="http://my.site/index.php/lists/ej8651mn51e/subscribe" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_8705ce44717aeac8551b690ed_1b95a85a92" tabindex="-1" value="erg34t34t3"></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
It sounds to me like you are talking about using a honeypot technique to catch spam bots. But I think you are thinking about it slightly wrong. A bot with any level of sophistication should be able to submit a form without it having an explicit submit button. Further, a sophisticated spam bot will be able to bypass any client-side validation you attempt to perform prior to submitting the form, and will also likely ignore any seemingly meaningless alerts you present it.
Thus, you want to augment your client-side validation with server-side validation when using a honeypot. The idea is that a normal user won't enter anything into a hidden field, but a bot might, so if there is an unexpected value in it then the form submission is bogus.
If you are, however, stuck with client-side validation here are a few articles about implementing honeypots in JavaScript:
https://lukehollenback.me/avoiding-bots-without-a-captcha/
http://jennamolby.com/how-to-prevent-form-spam-by-using-the-honeypot-technique/
I'm trying to get rid of the "put your password in again to confirm it" field in my sign up form. The design pattern I've seen to get around this is a checkbox which will reveal the password to the user - so they can verify it. However, implementing it seems to be a pain.
Here's my relevant html:
<form name="signup">
<div class="form-group">
<input id="usernameInput" class="form-control" placeholder="username">
</div>
<div class="form-group">
<input type="email" id="emailInput" class="form-control" placeholder="email">
</div>
<div class="form-group">
<input type="password" name="passwordInput" class="form-control" placeholder="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="show-pass" value='1' onchange="showPass()"> Show password
</label>
</div>
<button type="submit" class="btn btn-info btn-lg">Sign Up</button>
Back
</form>
And the accompanying javascript:
function showPass() {
document.signup.passwordInput.type=(document.signup.show-pass.value=(document.signup.show-pass.value==1)?'-1':'1')=='1'?'text':'password';
}
However, when I try it in firefox, I get the following console error:
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.
The error is a little cryptic seeing as the issue isn't with having a password field on a non-https website (I had it working before). Is there something I'm missing here?
If you have ever heard about jQuery use it, it will be easirer
$('#id-of-checkbox').change(function(){
if($(this).is(':checked')){
$('.password-fields').attr('type','text');
} else {
$('.password-fields').attr('type','password');
}
});
I integrated nicEdit because it's very light unlike all the other ones that contain hundreds of kb's.
In Chrome it is however causing problems. It for example doesn't save the text into the textarea or make things bold. The problem can be observed at this website or see below code. Please don't provide a hack like one answerer did because that's not going to help anything.
I have disabled the editor for debugging purposes. You can enable it with your console through new nicEditor().panelInstance('comment');
<div class="rdd blog-item">
<h1><a id="blog-item-title" href="/b/asdfssadfadf">this ia test</a></h1>
<div class="blog-date">
Date posted: 2013-03-01
</div>
<div class="blog-message">
<p>
asdfasdfas
</p>
</div>
<div class="blog-keywords">
Keywords: dfsa sadfasd adfasf adfas
- jlk
</div>
<h4>0 Comments</h4>
<div class="blog-comment blog-new-comment">
<form id="new_comment" name="new_comment">
<div class="blog-comment-row">
<h4></h4>
<h4>Would you like to place a comment?</h4>
</div>
<div class="blog-comment-row">
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
</div>
<div class="blog-comment-row">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" title="Enter your name">
</div>
<div class="blog-comment-row">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" title="Enter your email">
</div>
<div class="blog-comment-row">
<div class="blog-comment-cell">
</div>
<div class="blog-comment-cell">
<a class="blog-comment-submit blog-comment-button" href="">Submit</a><br/>
Your ip address is 220.245.93.218
</div>
</div>
</form>
</div>
</div>
The Bold problem is caused by CSS inheritance. In your css file remove rdd blog-item span{} and it will work. nicEdit does not save the contents automatically in the textarea. At form submission you therefore have to run: nicEditors.findEditor('comment').saveContent(); to save it
You can bind events on the editor and save it's contents when that event is fired.
When I run this code on your example page, it works for me (your server doesn't pickup the nicEditor HTML tags though):
var commentNicEditor = new nicEditor().panelInstance('comment');
commentNicEditor.addEvent("blur", function () {
commentNicEditor.instanceById('comment').saveContent();
});
Updated with jQuery-free solution based on official documentation.