<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('')" />
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 want to validate input value not equal to by default value through html5 validation,is it possible?
<input type="text" name="First Name" value="First Name" id="FirstName"
required="" title="First Name is Required!" >
when user click on submit button, if input filed has value= First Name
then show error.
I don't want to use placeholder="First Name".
Is there a way to validate using pattern attribute,
like pattern="!First Name" <-Stupid logic :)
Adding a pattern should work.
<input type="text" name="First Name" value="First Name" id="FirstName"
required="" title="First Name is Required!" pattern="^((?!First Name).)*$">
This will throw a error if your value contains the string "First Name".
You can use Javascript for this try below:
<form>
<input type="text" name="First Name" value="First Name" id="FirstName" required="" title="First Name is Required!">
<input type="submit" value="Submit" onclick="if (document.getElementById('FirstName').value == 'First Name') return false;">
</form>
There is a better solution: use the placeholder attribute instead of the value attribute ... but do not use it as a replacement for a label (see MDN page on input).
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="First name is required" ... />
This means that you do not need to have any logic to check the default value has not been filled.
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]">
<form class="form-asd" role="form">
<h2 class="form-signin-heading">login</h2><hr />
<label class="control-label" for="username">Username</label>
<input class="form-control" type="email" required="" placeholder="username"data-error="enter username"></input>
<label class="control-label" for="username">password</label>
<input class="form-control" type="password" required=" " placeholder="Password"></input>
<label class="checkbox"></label>
<button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>
how can we change this default message of popover of the require field "Please fill out this field "to "please enter username"
You can use setCustomValidity function when oninvalid event occurs.
Like below:-
<input class="form-control" type="email" required=""
placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>
Update:-
To clear the message once you start entering use oninput="setCustomValidity('') attribute to clear the message.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Combination of Mritunjay and Bartu's answers are full answer to this question. I copying the full example.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Here,
this.setCustomValidity('Please Enter valid email')" - Display the custom message on invalidated of the field
oninput="setCustomValidity('')" - Remove the invalidate message on validated filed.
And for all input and select:
$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
I wanted to change the text of the textarea. This method helped
<form action="/action_page.php" method="post">
<input type="text" required placeholder="username" oninvalid="this.setCustomValidity('Error validate')" oninput="setCustomValidity('')">
<br><br>
<textarea placeholder="Ko’cha, uy, xonadon" name="address" required oninvalid="this.setCustomValidity('Majburiy maydon')" oninput="setCustomValidity('')"></textarea>
<input type="submit" value="Submit">
</form>
$("input[required]").attr("oninvalid", "this.setCustomValidity('Say Somthing!')");
this work if you move to previous or next field by mouse, but by enter key, this is not work !!!
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.