I need to validate a date/time field on a webpage but want it to do it without reloading the page and would like 'instant' feedback for the users.
What's the best/easiest solution.
BTW: easiest scores 65% of total points
Edit:
What if best was 65% of total points?
If you would like to use JavaScript then it has built in date validation functions. However, if you do not want to go the JavaScript route, you could change the UI to dropdown controls which would limit the users ability to enter invalid data. You would still need to check server side to ensure nobody submits Feb 30th.
Check out this javascript date validation function.
It uses javascript, regular expressions and the 'onblur' event of a text input.
#David H. Aust
Using onblur for validation is problematic, because some folks use the enter key, not the mouse, to submit a form. Using onblur and the form's onsubmit event in conjunction could be a better solution. Back when I did JS validation for forms a lot more, I would run against keyup events. This gave the user instant feedback on whether or not their entry was correct. You can (and I did) also put checks in place so that the user doesn't receive an "incorrect" message until they've left the field (since you shouldn't tell them they're incorrect if they aren't done yet).
I would recommend using drop-downs for dates, as indicated above. I can't really think of any reason not to--you want the user to choose from pre-defined data, not give you something unique that you can't anticipate.
You can avoid February 30 with a little bit of Javascript (make the days field populate dynamically based on the month).
#Brian Warshaw
That is a really good point you make about not forgetting the users who navigate via the keyboard (uh, me).
Thanks for bringing our attention to that.
A simple javascript method that reads what's in the input field on submit and validates it. If it's not valid, return false so that the form is not submitted to the server.
... onSubmit="return validateForm();" ...
Make sure you validate on the server side too, it's easy to bypass javascript validation.
If you're using ASP.NET, it has validator controls that you can point to textboxes which you can then use to validate proper date/time formats.
There are a couple of date widgets available out in the aether. Then you can allow only valid input.
I've used this small bit of js code in a few projects, it'll do date quickly and easily along with a few others.
Link
Looks like there's a great video about the ASP.NET AJAX Control Toolkit provides the MaskedEdit control and the MaskedEditValidator control that works great. Not easy for beginners but VERY good and instant feedback.
Thanks for all the answers though!
asp.net
Unfortunately I can't accept this answer.
Related
I have a rather stupid question, but I would like some input on the issue.
On some websites you have a date input field, which has a placeholder in the form of mm/dd/yyyy.
However, when you start typing, the characters are getting replaced one by one, like 02/3d/yyyy.
So its not a placeholder but some sort of dynamic input already. My question is, how is this generated? Is this a javascript library (jquery, angularjs etc.) or any other feature im not aware of?
Thanks for your help, I tried finding appropriate code online but nothing did the function described above.
I mean of course you could program in JS an event listener on keypress, and depending on the input you adjust the field accordingly, but I wonder if there is an easier way to do so!
You can create the mask by following this guide: https://github.com/RobinHerbots/Inputmask
I'm developing a web app where I should get time and date through a form. I have tried time but unfortunately it is not compatible with all browser. For example it doesn't work properly in Safari. So which is the best way to get date and time?
Select a time: <input type="time" name="usr_time">
this element doesn't work correctly on Safari
The new HTML 5 input types are very poorly supported right now.
Some options:
You can leave the code as it is and sanity check the input with JavaScript.
Use two input fields as suggested by #HaukurHaf
Use a JavaScript library
Write your own JavaScript
The quickest to get right would be to use a library that uses JavaScript to attach a script to the input field giving the user a better experience with perhaps a clock or other selector to help them.
For example, the JQuery based Time Entry helper by Keith Wood.
I have a web application for tagging data and viewing data by tag, so my UI is a list of checkboxes for each tag, a list of checkboxes for each data item, a "Tag" button, which adds the checked tags to the checked data, and a "Filter" button, which ignores the checked data and just displays only the data items with the given tag.
My problem is that the former operation (tagging data) is "obviously" a POST operation, whereas the latter operation (viewing data according to a tag) is "obviously" a GET operation. But the method attribute is attached to the form, not the submit button, so I have to choose one or other for both buttons.
I don't want to make two forms, since as far as I can tell this would force me to duplicate the entire tag list. Is there any way I can choose my method based on the choice of submit button?
A JavaScript solution is permissible, but one without would be preferred.
(I am going to post an answer to this question, but I don't particularly like it, so I would welcome alternatives).
In principle, you could use the formmethod attribute in a submit button, as per HTML5. However, it is not recognized by IE, even in IE 9. The existence of the feature in HTML5 indirectly proves that previous versions of HTML lack a feature for this.
On the other hand, the POST method can be used even for simple viewing that does not cause any changes in the outside world, and in many situations it has to be used for technical reasons (e.g., too much data). So I think the method issue is not very relevant; just use POST.
I would honestly go with a javascript solution, in the onsubmit of the form fire a method which a) checks the submit button that was pressed and b) based on this changes the method of the form.
One possible solution would be to use POST, and then have the server give a 303 See Other header to change it into a GET request. This involves making two requests to serve the purpose of one, which is unfortunate, but at least means that the URL will change so people can link to a specific tag selection.
I agree with javascript solution, proposed by Jon Taylor, the problem is not if your form's method is GET or POST, but how do you filter/validate/sanitize user input. If your concern is related to the fact, that the user can manipulate the form's method, then you should implement solution to that matter on server side.
Assume I have a html from, and it contain some submit type. I want to create a "are you sure" popup window that will appear when user click submit button.
My question is that is there any way to create it by using "only" html, not using javascript or any other?
HTML only is possible, but not without a postback
Scenario that could work without javascript:
You have your form with submit button
User clicks (and submits) the form
You display another form with are you sure? form (that contains Yes and No buttons as well as hidden fields of the first form that will make it possible to do the action required on the original data
functionality that executes the action and goes back to whatever required.
This would be completely Javascript free, but it would require several postbacks.
This kind of thing is usually done on the client with a Javascript confirm() function (here's a simple example) or lately with a more user friendly modal dialog provided by many different client libraries or their plugins.
When to choose the script free version?
If you know your clients are going to be very basic ones (ie. vast majority of your users will access your application using clients like Opera Mini that's not able to run scripts at all). But in all other cases it's much better to do this using Javascript. It will be faster, easier to develop and much more user friendly. Not to mention that it will put less strain on your server as well since certain parts will execute on the client without the need of any server processing.
No, there isn't. Despite of the new features in HTML 5, HTML is still a markup language, not a programming language. In order to express dynamic behavior (such as an "are you sure?" box), you need to use a programming language.
Javascript would be the most obvious choice for this, but you could also do it with frameworks that can get you around writing Javascript by hand (for example ASP.NET).
Edit: Actually it appears that it would theoretically possible to do this with without Javascript or other frameworks. As I just learned, HTML 5 + CSS 3 seems to be turing complete. But this is hardly relevant to this question.
It's possible to ask for a confirmation, but it will not be in a "popup window". The creation of the "popup window" requires javascript/other language.
It will be:
Request (first form)
POST
Response (confirmation form)
POST
Response (outcome message)
You can create a form with all hidden elements containing the data from the first form and a "Yes" and "No" button below the "Are you sure?" text. You can use PHP sessions to avoid the hidden form elements. If there is a lot of data or confidential data or you do not want to re-validate the data from the second form, use sessions. Make sure you validate the data from either form before using it.
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
What I did for this exact problem was make sure I had multiple "divs" in my code. For me specifically, I had two main ones.
First, one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)
I was looking at the raw HTML rendered by a SharePoint (2010) list item edit page, and I noticed that an input field (rich text field) made use of an AlwaysEnableSilent attribute. i have checked online for an explanation of what the attribute does, but have not been able to get a answer. Does anyone know what this attribute does?
Thanks, MagicAndi
ASP.Net validators allow you to turn them on/off using client side scripting using ValidatorEnable, but whenever you turn the validator on that way the validation fires immediately. Sometimes you (SharePoint) may want to be able to control which validators are active using client side scripting, but without the validation firing when you turn it on (during load, before the users have had the possiblity to fill out the fields).
In order to handle this SharePoint has defined its own function STSValidatorEnable with an extra parameter bSilent, so it can turn on validators without them firing.
They then found out that for some validators they always want them not to fire when STSValidatorEnable is called, even though the caller uses bSilent==false. So they introduced an attribute AlwaysEnableSilent which tells the validator never to fire when turned on using STSValidatorEnable, but only during postback.