HTML5 provides alternate of JavaScript validation using Regular Expression.
But I want to add multiple validation on single input field and according to that it should show the message.
For example.
<input type=passowrd name=passowrd/>
Here password field should contains following validation with message.
I'm afraid it cannot be done with HTML alone (no, not even HTML5).
You'll have to use JavaScript to achieve the task.
Constraint validation is only designed for one error message per input field. A way to get around this is to concatenate the validation messages.
password.setCustomValidity(password.validationMessage + ' At least one capital letter');
The downside is that you can't append html, so all messages will be placed inline.
Related
Input type number accepts + and -.
I don't want this behavior. How can I prevent this?
<input type="number">
I can type 100+ or 200- or both 300+-
maybe some other special characters are acceptable. I don't want this. Number input should only be Number.
Is it possible User should not even type any special characters?
The default behaviour of a number input is to allow the user to type anything they like and perform validation when the form is submitted.
This is consistent with how all other validation features built into HTML forms work.
If you type 100- then try to submit the form, the submission will fail and an prompt along the lines of "Please type a number" will appear.
If you want validate-as-you-type behaviour then you will need to implement it with JavaScript. This is tricky to pull off well though. For example, you might prevent a user from pasting a string copied from a document like 123,456.12 because it has a comma in it. If you let them paste it they can then edit the comma out.
I am concerned about web security and the use of the HTML5 required word on input tags. I am trying to use it as part of 'form input validation'. Is the use of the HTML5 'required' on input tags something that is reliable for validation or is it easily manipulated by a user trying to bypass the input field requirement.
I have searched for information on html security and found little on this.
Thanks
In short, the answer is no, client side code is not a safe place to rely on security checks.
The method of using required provides the user with feedback and allows for a nicer user interface, but for security you will want to perform fidelity checks on all data passed over to the server side, how that is done depends on your backed architecture.
To answer your question in the comments, the required attribute is there to prevent the form being submitted without the field being complete, this is however purely to help the user know it is required. If you have a hacker simply remove the required attribute from the markup, then they're up to no good anyway and that's where a backend check will save you.
In my Opinion it is not an effective method. Required attribute can easily be changed using inspect element on that field on the browser.
The main thing here is to keep in mind that all client side validation is your first line of defense but most of the time you need an extra layer to check on your server side.
I could make an http post request to the action field of your form without using your form at all with tools like postman (chrome extension) if your server doesnot have extra validation then you are not safe.
I am volunteering on a website-based project that is trying to make all pages fully operable JavaScript free before adding any JavaScript for enhancements, and I was asked to investigate whether or not a particular scenario could be handled purely through HTML/CSS.
What we have is a form that is populated to help us filter a list of tickets that are displayed on the screen after a page update through a GET action, which itself works fine, but the concern with the current implementation is that the URL cannot be made into a permanent link. The request, however, to keep the permanent link as minimal as possible, is to only send GET parameters for fields that are populated with something (so, suppressing GET parameters for fields that are blank) instead of having a different GET parameter for each form field on the page.
I have thought of several ways that could be done, most including JavaScript (example: create fields with ids but no names and a hidden field w/ name that uses JS to grab the data from the fields), but also one that would be a POST action with a redirect back to the GET with a human readable string that could be permanently used. The lead dev, however would prefer not to go through the POST/redirect method if at all possible.
That being said, I'm trying to make sure I cover all my bases and ask experts their thoughts on this before I strongly push for the POST/redirect solution: Is there a way using only HTML & CSS to directly suppress GET parameters of a form for fields that are blank without using a POST/redirect?
No, suppressing fields from being submitted in an HTML form with method of "GET" is not possible without using JavaScript, or instead submitting the form with a POST method and using a server side function to minimize the form.
What fields are submitted are defined by the HTML specification and HTML and CSS alone cannot modify this behavior and still have the browser be compliant with the standards.
No, you cannot programmatically suppress any default browser behavior without using some kind of client scripting language, like JavaScript.
As a side note, you say "JavaScript for enhancements", but JavaScript is not used for enhancements these days. And no one in the real world would except a decent front-end without the use of JavaScript. I would suggest you simply use JavaScript.
I do not think you can avoid Javascript here to pre process before submission to eliminate unchanged /empty form fields.
I have an HTML form rendered by PL/SQL procedure that has an input field for comments to be entered by the user. In case, he enters some script and submits, the same gets inserted into database. To escape it while inserting the data, we can use htf.escape_sc function (takes care at back-end level). But can we do that for html at front-end level itself? If so, how to proceed?
you may wish to have a look at validation widgets from some js framework. offhand i remember kendoui (kendo ui validator) and jqwidgets (jqxValidator). however beware as both toolkits are commercial. jqueryUI should have similar functionality for free, though.
in case you prefer a plain html5 solution have a look at HTML5 Form Validation / Constraint Validation API. There also are an article on mozilla MDN, a list of Supporting browsers, and of course the official standard.
however, a plain html solution will not perform any conversion - which means that the user has to enter the data in the way it is expected at the other end, which in your case is probably nothing you'd want to burden the user with ...
ps:
this fiddle contains an elementary example for validating against a pattern.
disclaimer: i'm not affiliated with any of the named toolkits' producers.
I need a text input field which does not use the autocomplete function - If a user has submitted the form before, his previous submissions should -not- appear as he types into the form again, even if he is typing the same thing again. As far as I can tell, there are a few ways to do this:
1. <form autocomplete="off">
However, I believe this is a proprietary tag, and I am not sure how compatible it is across browsers
2. Give the input field a random 'name'
One could even use JS to set the name back to an expected value before submission. However, if the user does not have JS installed, you'd need another hidden input with the name - and the php code on the other side gets messy fast.
Do you know of any other ways? Is one of these ways the "accepted" way? Comments?
Thanks,
Mala
Lookie here: Is there a W3C valid way to disable autocomplete in a HTML form?
Stick with the random name. You can do it simply enough server and client and you meet your no-js requirement.
You can store the original and changed name in a $_SESSION variable before outputting the form, and after the user submits, just get the name from there:
$random_name = md5('original_name' . time());
$_SESSION['original_name'] = $random_name;
...output form...
And after submitting you can easily get the value from $_POST using the $_SESSION variable:
$field_value = $_POST[$_SESSION['original_name']];
Just be sure that you have sessions available by calling session_start() before any processing.
Autocomplete is something that browsers decided to do on their own, so there’s certainly no spec document to look at.