Last post Jan 25, 2014 04:27 AM by Ruchira
Jan 24, 2014 11:41 AM|Vjitendra|LINK
I have one Textbox control in which i assisgned HTML5 "required" property for empty text entry.
and i have two button one for reset the all textbox value and another for save record in database.
i need that only HTML5 validation message popup should display on save button click only.
Thanks in Advance.
Jan 24, 2014 11:54 AM|sandeepchrs|LINK
Validating required fields is as easy as adding the required attribute
to each <input> tag
that must be completed, namely Name, Email, and Number of Tickets. For example, Name now looks like this:
<input id="name" name="name" value="" aria-describedby="name-format" required>
<span id="name-format" class="help">Format: firstname lastname</span>
If we try to submit this form now without completing any of the required fields, the browser will notify us:
<input id="name" name="name" value="" aria-describedby="name-format" required aria-required=”true”/>
Now that our users get prompted to complete required fields, we need to make sure that the data they submit is in the format we require.
We'll want the 'Name' field to be submitted in the format 'Firstname Lastname', and to only contain letters and a space (NB in real world scenarios,
you might need to take account of other locales – this example has been kept simple deliberately). We can achieve this by adding a pattern attribute to the 'Name' field, setting it's value to the regular expression we want the data to be compared against:
<input id="name" name="name" value="" aria-describedby="name-format" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+">
When using the pattern attribute, the ^ and $ for
the start and end of the regular expression are implied and don't need to be included.
You can help the user by including a title attribute that tells them the format you require:
<input id="name" name="name" value="" aria-describedby="name-format" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname">
The text in the title attribute is then appended to the built-in validation message:
To make sure our user enters the right data in the email, website, and number of tickets fields, we can use some of the new input types added in HTML5:
<input type="email" id="email" name="email" required>
<input type="url" id="url" name="url">
<input type="number" id="numTickets" name="numTickets" required>
By specifying the appropriate type, our browser will validate the data for us and make sure we've got an email address in the email field, a URL in the website field, and a number in the number of tickets field.
Note too that the type attribute
is no longer a required attribute itself. If you don't specify it theinput tag
will implicitly be of type="text".
Suppose we wanted to restrict the number of tickets each person could buy? We can do this by using the max and min attributes:
<input type="number" min="1" max="4" id="numTickets" name="numTickets">
If the user enters anything less than 1 or greater than 4, they'll be prompted to enter a number in the permitted range.
Jan 24, 2014 12:17 PM|Vjitendra|LINK
but i use the same on my project,the problem is that i have two button on both button html5 popup message is displaying
i want to display popup message on single button click only.when click on another button same message is dispalying.
what to do for this..
Jan 25, 2014 04:27 AM|Ruchira|LINK
You can include formnovalidate on the resest button so it won't fire the HTML 5 validation.
<input type="button" text="Reset" formnovalidate />
My Tech blog | My YouTube Channel