I'm trying to use input type="time". On my page, if I use two of them. The second one gives a validation error on any time I enter unless I leave it empty.
I've tried values like:
05:05
23:15
The result is always:
Please enter a valid value. The field is incomplete or has an invalid date
The associated HTML is
<input type="time" name="timeStart" value="13:22" class="timepick form-control" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="16:45">
<input type="text" name="dteEnd" id="dteEnd" value="16-04-2014" class="date form-control" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="Data">
<input type="time" name="timeEnd" value="" class="timepick form-control" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="18:00">
Related
I need a regexp with letters and - to use as pattern validate of an input type text,
for example:
<input type="text" name="name" id="name" class="form-control" placeholder="name form" pattern="[A-Za-z-]" required="required">
But it still validate also other characters when i fill and sumbit form.
You can use the following pattern ([A-Za-z\-]+) to check for the whole input:
<input type="text" name="name" id="name" class="form-control" placeholder="name form" pattern="[A-Za-z\-]+" required="required">
This is my current code for the input field. How can I make it display a message saying that the number I've entered should not start with zero? thanks
<input type="number" min="10" max="1000" class="form-control" name="payment"
placeholder="enter payment" style="text-align:center" autofocus required/>
<br/>
For instance, typing 020 should not be accepted. Only numbers between 10 to 1000.
This should work:
<input type="text" class="form-control" name="payment"
placeholder="enter payment" style="text-align:center" autofocus required
pattern="[1-9]\d*" title="A number with no starting zeros"/>
https://jsfiddle.net/spL2par2/
try this using HTML's pattern attribute
<input type="number" class="form-control" name="payment"
placeholder="enter payment" style="text-align:center" pattern="[1-9]\d*" autofocus required/>
<br/>
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.
My input tag in a form is not showing the suggestions for previous entered values
<form target="temp" method="post" action="">
<input id="UserID" name="UserID" type="text" placeholder="User ID" autocomplete="on" spellcheck="false">
<input id="Password" type="password" placeholder="Password" spellcheck="false">
<input type="button" value='Submit' onclick="login();">
</form>
What is happening is:
I want it to be:
You can make most browsers display values previously entered in input fields by giving a name to the input.
Change first input to this:
<input id="UserID" name="UserID" type="text" placeholder="User ID" spellcheck="false">
UPDATE
Not sure what your onClick function is doing but...
Change type="button" to type="submit":
<input type="submit" value='Submit' />
<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 !!!