I am looking for an input which has to take only email addresses as the input, however it is allowing any input. I want the input box to be focused as danger until it is a valid email address. It should show an alert message if it is not a proper email address.
<input type="email" class="form-control" placeholder="Email Id"
id="customerRegistrationEmailId" data-toggle="tooltip"
data-placement="top" title="Enter Email Id" />
<input type="email" name="email" required
ng-class = "{'redborder':errortemp||email.shwerr,'greenborder':contactform.email.$valid}"
ng-click = "errortemp = false;email.click=true;"
ng-model="userdata.email" autocomplete="off"
ng-pattern = '/^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/' >
In the controller:
$scope.errortemp = false;
if(!userdata.email.$invalid){
$scope.temp=True
}
Related
I have a form with multiple inputs, but when autofilling, the password manager always enters data in the first input above the password. Can I tell it to enter data in a specific input?
Code example:
<input placeholder="Your email" type="email"/>
<input placeholder="You fb id" type="text" />
<input placeholder="Your password" type="password"/>
Chrome might think that your email and text inputs are the same, so it auto fills both of them. So, we are going to put an irrelevant "type" on one of the inputs.
<input placeholder="Your email" type="email"/>
<input placeholder="You fb id" type="url" />
<input placeholder="Your password" type="password"/>
We set the email type to email, fb id to url, and password type to password.
Finally found a solution!!!! If you add an onChange event to the field that is above the password field and accepts automatic login fill, it will fill data in the field specified in js. Here is code example:
HTML:
<input placeholder="Your email" id="userEmail" type="email" />
<input placeholder="You fb id" id="fbId" type="text" />
<input placeholder="Your password" type="password" />
JS:
const fbId = document.querySelector("#fbId");
fbId.onChange = () => {
document.querySelector("#userEmail").value = fbId.value;
};
Result:
I've been able to change the error message when the user has not typed their email in yet, but how do I change the error message when the user types in their email with the wrong format?
This is my code written in Bootstrap 4 style:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">
</div>
You simply can fix this with adding title to input tag
<input type="email" class="form-control" name="email" id="freeform_email"
placeholder="Enter an email" required="required"
oninvalid="this.setCustomValidity('Enter an email that contains "#". Example: info#roshni.nl')" title="Email: the email contains '#'. Example: info#ros-bv.nl" />
Yours should be then:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="this.setCustomValidity('')" title='<your text>'">
</div>
You're welcome.
Here’s an example of how to do it:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
You’ll have to change the text inside alert to include your custom message and action_page.php to include your own and add your desired styles all over!
UPDATE
If you don't want to implement your own JavaScript functions then you can just go ahead and add conditions to the oninvalid as follows:
<input type="email" name="email" required="" class="form-control" oninvalid="if (this.value == ''){this.setCustomValidity('This field is required!')} if (this.value != ''){this.setCustomValidity('The email you entered is invalid!')}" oninput="setCustomValidity('')">
<input type="text" class="form-control " name="username" placeholder="Enter ID " required >
I have to change the position of validation which tells please fill out details to rightside of textbox.I have to change validation message to "Enter Username".How to implement those?
For custom validation messages i got an answer
<input type="text" id="username" required placeholder="Enter Name" oninvalid="this.setCustomValidity('Enter User Name Here')" oninput="setCustomValidity('')" />
I want to validate email adresses with the required attribute. But if users enter a space at the end I gets invalid again.. See here: http://jsfiddle.net/6he4b3rb/
<input id="email" class="validate[required] wpsg_checkout " type="email" required="" placeholder="Deine E-Mailadresse" value="" name="wpsg[checkout][email]">
I gave like
<td> <label for="email" class="required">To:</label></td>
<td><input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. myname#example.net" required data-email-msg="Email format is not valid" "/></td>
and in the
document.ready(function(){}
I have defined like
var validator = $("#email").kendoValidator().data("kendoValidator");
It is validating single email, I want to validate more than one email at a time. How can I do this?
You should then add the attribute multiple to the input tag:
<input type="email"
id="email"
name="Email"
class="k-textbox"
placeholder="e.g. myname#example.net"
required
data-email-msg="Email format is not valid"
multiple="multiple"/>
You can now add multiple email adresses separated by a coma.