Massage not Changing In required field in form html5

Question

I have this code:

<form name="submitform" method="post" action="signupsuccessfull.php" onsubmit="return validate(this)" >
<p id="error_para">* fields are required</p>
<span id="error_para">*</span> Name:<input type="text" name="name" oninvalid="this.setCustomValidity('Please Enter Your Name.')" required id="u_name" /><br /><br />
<span id="error_para">*</span> Username:<input type="text" name="username" oninvalid="this.setCustomValidity('Please Enter Uniqe Username.')" required id="field_username"  /><br /><br />
<span id="error_para">*</span> Password:<input type="password" name="password" oninvalid="this.setCustomValidity('Please Enter Your Password.')" id="user_password" required /><br /><br />
<span id="error_para">*</span>Re-Enter Password:<input type="password" name="repassword" id="user_repassword" oninvalid="this.setCustomValidity('Please Confirm your Password.')" required /><br /><br />
<span id="error_para">*</span> Email:<input type="text" name="email" id="user_email" oninvalid="this.setCustomValidity('Please Enter Your Valid Email Address.')" required /><br /><br />
<span id="error_para">*</span> Gender:<input type="radio" name="gender" value="male" oninvalid="this.setCustomValidity('Please Select Your Gender')" id="gender_user" required />Male&nbsp;<input type="radio" name="gender" value="female" />Female<br />
About Urself:<textarea rows="5" cols="18" name="about" ></textarea><br /><br />
<input type="submit" value="Create Account" name="submit" />&nbsp;
<input type="button"  value="Cancle" onClick="parent.location='../example/try2.html'"><br /><br /> 
</form>

but on submit, even the field is not blank, I still get the error message.

anyone have idea what is happening.?

I imagine it's your `oninvalid=""` that's the problem – Andy Holmes Feb 10 '16 at 11:32 — Andy Holmes, Feb 10 '16 at 11:32
Use `title` instead of `oninvalid` – Pedram Feb 10 '16 at 11:41 — Pedram, Feb 10 '16 at 11:41

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Just add oninput="setCustomValidity('')"

Example:

<input type="password" name="user_password_new" pattern=".{6,}" required
   oninvalid="setCustomValidity('Minimum length is 6 characters')" 
   oninput="setCustomValidity('')" />

Main Question:

HTML5: Why does my "oninvalid" attribute let the pattern fail?

Example:

<form name="submitform" method="post" action="signupsuccessfull.php" onsubmit="return validate(this)" >
<p id="error_para">* fields are required</p>
<span id="error_para">*</span> Name:<input type="text" name="name" oninvalid="setCustomValidity('Plz enter on Alphabets ')" required oninput="setCustomValidity('')" id="u_name" /><br /><br />
<input type="submit" value="Create Account" name="submit" />&nbsp;
<input type="button"  value="Cancle" onClick="parent.location='../example/try2.html'"><br /><br /> 
</form

+1 for beating me to the answer; I discarded my answer when yours appeared. The snippet example is misleading though. Clicking create account without entering text in the name filed will not throw the invalid message. In an actual browser it should work. — BillK, Feb 10 '16 at 12:13

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

probably you have problem with validity check. see similar question over here html5 oninvalid doesn't work after fixed the input field

edited May 23 '17 at 12:31

Community

1
1

answered Feb 10 '16 at 11:43

1976 Umar

3
6

Massage not Changing In required field in form html5

2 Answers2