I need a textbox in my form for entering email address.But address should be business email.Never allow to enter personal gmail or yahoo address or show warning popup while doing so.How to implement that?Can i use angulars ng-pattern to implement it?
You can do something like this. No need for angular pattern.
HTML
<form id="signup" method="post">
<input id="email" type="email" placeholder="Your e-mail." />
</form>
JS
$('#email').blur(function() {
validateEmail($('input').val());
return false;
});
function validateEmail(email) {
var re = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\#[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
if (re.test(email)) {
if (email.indexOf('#yourdomain.com', email.length - '#yourdomain.com'.length) !== -1) {
alert('Valid email.');
} else {
alert('Email must be a yourdomain e-mail address (your.name#yourdomain.com).');
}
} else {
alert('Not a valid e-mail address.');
}
}
Check the fiddle
Reference
Related
when i am doing a input field validation using pattern , how frequently the value will be validated . i would like to know whether it will validate on (keyup) or (change)
for ex:
<input type="email" [(ngModel)]="emailAddress" name="emailAddress" data-toggle="tooltip"
title="{{emailAddress}}" #email="ngModel" multiple
pattern="^(([a-zA-Z0-9_,.]*#*\w+([-+.']\w+)*\w+([-.]\w+)*\.\w+([-.]\w+)*)*([' '])*)*$"
class="form-control" />
i would like to know whether the text i enter will be validated on each keystroke ?
The pattern attribute is checked only upon submission the form or when you press enter on the input tag, so only on the enter key's stroke you might say.
If you want it to be validated on every keypress, keyup or onchange, you can set the corresponding attribute to validate the input like so:
<input keyup="validate(this)" />
...
<script>
function validate(x)
{
regex = /[a-zA-Z0-9]+/;
window.alert(x.value.match(regex) == null);
}
</script>
If I understand correctly your issue, you are trying to check the value entered "real time".
In the case, you could use input event to get value changed.
// Add error message element after input.
$('#input_email').after('<span class="error-message">Please write your message error here!</span>')
$('#input_email').on('input', function (evt) {
var $regex=/^(([a-zA-Z0-9_,.]*#*\w+([-+.']\w+)*\w+([-.]\w+)*\.\w+([-.]\w+)*)*([' '])*)*$/;
var value = evt.target.value;
if (value.length === 0) {
evt.target.className = ''
return
}
var result = value.match($regex);
if (result) {
evt.target.className = 'valid'
} else {
evt.target.className = 'invalid'
}
})
input.invalid + .error-message {
display: initial;
}
.error-message {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input_email" type="email" [(ngModel)]="emailAddress" name="emailAddress" data-toggle="tooltip"
title="{{emailAddress}}" #email="ngModel" multiple
pattern="^(([a-zA-Z0-9_,.]*#*\w+([-+.']\w+)*\w+([-.]\w+)*\.\w+([-.]\w+)*)*([' '])*)*$"
class="form-control" />
In my website contact form. I have received email. but there are some HTML tags included in email.
Can you please provide any solution like validation (special symbol are not allowed) etc....
Check if this suits your needs.
You just need to add
required pattern = "[a-zA-Z0-9 ]+"
attribute to your input-textbox.
This will allow upper-case/lower-case text, numbers and spaces only.
<!DOCTYPE html>
<html>
<form>
<label>Name*</label>
<input type="text" name="name" class="field" required pattern="[a-zA-Z0-9 ]+" />
<input type="submit"/>
</form>
</html>
You can validate with javascript while submitting the form call below function onsubmit. like below.
function Validate() {
str = (document.getElementById('TextBox')).value;
if (str.match(/([\<])([^\>]{1,})*([\>])/i) == null) {
// valid text entered
}
else {
// not valid
}
}
(I copied the code below from a tutorial but it dose not work out, and I wonder if I should do something specific on the page receiving the submitted data. )
<script>
function stopsubmit()
{
document.getElementById("submit").addEventListener("click",function(event)
{
if(document.getElementById("name").value="")
{
event.preventDefault();document.getElementById("erroeMessage").innerHTML="Please write your name";return false;
}
else
{
return true;
}
}
)
}
</script>
You can use onsubmit and return false to prevent submitting. A form can only have one onsubmit function though.
<form onsubmit="return validate();">
<input id="aField" type="text">
<input type="submit">
</form>
<script>
function validate() {
if(document.getElementById("aField").value.length == 0) {
alert("Hold it right there, buddy!");
return false;
}
return true;
}
</script>
Your code snippet has syntax errors, e.g.
if(document.getElementById("name").value="")
Must double equality instead one.
Your sample is worked in this fiddle (with my sample html):
Jsfiddle link
I am creating Careers FORM and Contact Us FORM in single page website? I have an Issue in using the form Submit Buttons?
The Issue is during validation of the input boxes, how to show difference between the two submit buttons (One SUBMIT button is for Careers form, and another is for Contact us form).
/* CAREER FORM SAMPLE CODE */
<form method="post" action="index.html" id="careerform">
<input id="cname" type="text" class="commonstyle comdesign" placeholder="Your name">
<span id="cnameinfo" class="spandesign0"></span>
<input id="bigbutton" type="submit" class="commonstyle" value="creer" />
</form>
/* CAREER FORM SAMPLE CODE */
/* CAREER FORM SAMPLE VALIDATION CODE IN JQUERY */
<script type="text/javascript">
$(document).ready(function() {
var career=$("#careerform");
var cname=$("#cname");
var cnameinfo=$("#cnameinfo");
cname.blur(validateCname);
career.submit.click(function(){
if(validateCname()){
return true;
} else {
return false;
}
});
<!-- Name -->
function validateCname(){
var cnam=$("#cname").val();
var regexp0 =/^[a-zA-Z]+$/;
if(cname.val().length < 3 || cname.val().length > 10){
cnameinfo.text("Atleast 3 letters!");
return false;
}
else{
if(regexp0.test(cnam))
{
cnameinfo.text("OK!");
return true;
}
else
{
cnameinfo.text("Field Required");
return false;
}
}
}
});
</script>
<!-- Name -->
/* CAREER FORM SAMPLE VALIDATION CODE IN JQUERY */
/* CONTACT US FORM SAMPLE CODE */
<form method="post" action="index.html" id="conform">
<span id="nameinfo" class="spandesign"></span>
<input id="conname" class="constyle comdesign" type="text" placeholder="Your Name">
<input id="consubmit" type="submit" class="constyle" value="ctact" />
</form>
/* CONTACT US FORM SAMPLE CODE */
/* CONTACT US FORM SAMPLE VALIDATION CODE IN JQUERY */
<script type="text/javascript">
$(document).ready(function() {
var form=$("#conform");
var nameinfo=$("#nameinfo");
var name=$("#conname");
name.blur(validateName);
form.submit.click(function(){
if(validateName() & validateEmail() & validateCon() & validateSubj() & validateInfo())
{
return true;
} else {
return false;
}
});
<!-- Name -->
function validateName(){
var nam=$("#conname").val();
var regnum =/^[a-zA-Z]+$/;
if(name.val().length < 3 || name.val().length > 10){
nameinfo.text("Atleast 3 letters!");
return false;
}
else
{
if(regnum.test(nam))
{
nameinfo.text("OK!");
return true;
}
else
{
nameinfo.text("Field Required");
return false;
}
}
}
<!-- Name -->
});
</script>
/* CONTACT US FORM SAMPLE VALIDATION CODE IN JQUERY */
THIS IS THE SAMPLE CODE WHICH I AM USING....
I can't understand your issue properly but If you want to submit two different form on two different submit buttons, then you can try as following:
suppose, you have two forms:
<form method="post" action="index.html" name="careerform">
<form method="post" action="index.html" name="contactform">
then you can call form.submit() on two different buttons:
<input type=button name=career_form_submit_btn onclick=careertform.submit()>
<input type=button name=contact_form_submit_btn onclick=contactform.submit()>
Then, since you're posting to the same page, you'll need some logic on the destination, to see if either form is submitted, and then do what you will with the form fields (store in DB, create cookie, whatever).
For the sign up form I am making, I want to validate passwords so that a user must enter a password that includes at least one capital letter and at least one number.
I have implemented this here:
http://jsfiddle.net/k9aHV/1/
<form action="login.php" method="post">
<p><b>UserName:</b> <input type="text" required pattern="\w+" name="fname"/></p>
<p><b>Password:</b> <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="password" onblur="this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : '');if(this.checkValidity()) form.password1.pattern = this.value;"></p>
<p><b>Confirm Password:</b> <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="password1" onblur="
this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same password as above' : '');"/></p>
<p><b>Email:</b> <input type="email" name="email"/></p>
<input type="submit"/>
</form>
At the moment, the field is validated only when the user presses submit.
How can I adjust my code so that the code is validated as soon as the user tabs or clicks away from the input field?
You can trigger native validation on blur like so
input.addEventListener('blur', function(e) {
e.target.checkValidity();
});
The problem is you can't trigger the validation error popup programmatically.
One workaround is to programmatically click the submit button BUT the popup will only show the first invalid input element!
A more user friendly solution is to show the validation message in an element.
See this JSFiddle
var idx;
var passwordInputs = document.querySelectorAll('input[type="password"]');
for(idx=0; idx< passwordInputs.length; idx++) {
//set custom validation
passwordInputs[idx].addEventListener('input', function(e) {
if(e.target.validity.patternMismatch) {
e.target.setCustomValidity('Password must contain at least 6 characters, including UPPER/lowercase and numbers');
}
else {
e.target.setCustomValidity('');
}
});
}
//code starting here is to show the validation message in a span element
function showValMessage(elem, msg) {
var span = elem.parentNode.querySelector('span');
span.innerText = msg;
}
var inputs = document.querySelectorAll('input');
for(idx=0; idx< inputs.length; idx++) {
var input = inputs[idx];
//validate on blur
input.addEventListener('blur', function(e) {
e.target.checkValidity();
});
//show validation message
input.addEventListener('invalid', function(e) {
showValMessage(e.target, e.target.validationMessage);
});
//hide validation message. There is on valid event :(
input.addEventListener('input', function(e) {
if(e.target.validity.valid) {
showValMessage(e.target, '');
}
});
}