HTML5 Required field space at the end set it to invalid - html

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]">

Related

Specify input for password manager autofill

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:

Email is is not getting validated in bootstrap

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
}

How can i style form validation messages?

<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('')" />

HTML field formatting

I have a standard HTML form.
<form method="post" name="myemailform" action="form-to-email.php">
Enter Name: <input type="text" name="name">
Enter Email Address: <input type="text" name="email">
Enter Message: <textarea name="message"></textarea>
<input type="submit" value="Send Form">
</form>
The problem is that when a value is input that is larger than the field size, upon clicking away, the field skips back to the beginning of the field so the end is cut off.
Is there a way to get it so that the view of the field stays where the carat was?
This is a javascript problem (client side), not a PHP one (server side).
You need to do this:
<input type="text" name="name" size="10" onblur="if (this.length > 10) {this.dir = 'rtl';} else {this.dir = 'ltr';}">
just check what is the proper length to use in order to change the input direction
You can use the HTML attribute size.

How to validate more than one email in kendo ui

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.