I am working on a project that use MVC 2.0 with Kendo UI. We decided to use AJAX validation instead of MVC Model level validation; which means validation happens during most "onchange" events on HTML controls. We coded the red CSS "highlight" on HTML controls when error happens and remove the highlight when there is no error. If there are multiple controls (e.g. checkboxes) we will highlight all of them when error occurs...and of course, error messages related to multiple fields validaton....
We get it sort of working but we had to implement a lot of javascript/jQuery coding on each web form page (including control id/name matching on the validation message) and does not seem to be able to implement it as a common routine against all web forms. We are also wondering if there is some sort of validation library already out there that more or less achieving the same thing...
Any suggestions?
If you tag your question with kendo-ui you are probably using it so it might be worthy taking a look into kendo.ui.Validator
You should try jQuery Validation
Its very easy to use, but you do still need to link each input to they type of validation required
Related
Ive got a table that contains a series of dynamic form fields and im using html5 and bootstrap 3 to control my site.
Ive decided as its only going to be me using this app that i can use native html 5 form validation.
What im wondering is, how do i detect if there is a validation error anywhere on my form and if so, control additional actions that are performed by the form?
The reason i ask, is because im validating dynamic fields and setting some to be disabled, but then enabling them on submit, and if i do so the validation routine catches it and i cant re-disable them when i need to
any help greatly appreciated
Considering that HTML5 is no longer just HTML, but instead a bunch of technologies lumped under that banner, I figured there would probably be javascript hooks for the validation.
Take a gander at this information from Mozilla:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation#The_HTML5_constraint_validation_API
It looks like you will have no problem hooking into the validation, and doing what you need.
I was wondering if there is already a framework or a jquery plugin which i can use to add constraints to form fields. With "constraints" in this case I don't want to say that field x is an e-mail field and needs to be validated as such but i want to define relations between form fields like:
If there is something selected in checkbox A --> enable Button B
If there are at least X entries selected in list A --> enable form field B
and so on and so forth..
I'm currently on the point of implementing it myself but I wanted to make sure that I don't reinvent the wheel.
It could be any JavaScript framework (standalone or jquery plugin).
Why a plugin? This is fairly easy with just jQuery:
$('input.A:checkbox').change(function() {
$('button.B').prop('disabled', !($(this).prop('checked'));
});
$('select.C').change(function() {
$('button.D').prop('disabled', !($(this).find('option:selected').length >= 10));
});
We're just assigning handlers to the events that happen when the inputs are changed - and I enable or disable the field depending on my condition.
I think it's better than getting a plugin because:
You're saving on HTTP requests for more files
You're saving performance by not loading more JS code
This is fairly simple as-is and there's no point to overcomplicate it.
See demo
If you use something like knockout you'd be able to make use of the knockoutvalidation framework.. or, in the past I've used jqbootstrapvalidation... the latter obviously requires bootstrap as well.
There are quite a few code samples on both sites & both frameworks are pretty easy to use. Feel free to comment on this post if you need any more specific help/advice.
Just a word of warning. If you do use knockout. Go with knockoutvalidation, and not bootstrap validation... or you'll have sleepless nights trying to get the 2 to play nicely.
Here is a jQuery plugin you could use:
http://github.com/keyo/jQuery-Form-Dependency
In languages such as Java or GUI frameworks such as Qt for C++, it is possible to get a handle to some block of text (e.g. a label widget) the user cannot change, but which the program can modify based upon some condition being satisfied. I'd like to be able to do the same thing on an HTML web page from within some JavaScript code.
For example, consider a web page for entering user credentials. If the credentials are invalid, I'd like to display a message on the current web page without having to load a completely new page.
I've gotten it to work using an HTML text box or textarea, set to disabled, read only with some display style changes (via CSS). Changes induce some JavScript code to run which may result in changes to the value field of these text boxes or textareas. While this works okay, it just doesn't seem right. Is there a more orthodox way of accomplishing this?
Sure. There are a few libraries to handle this.
You may be asking for form validation. If so, try jQuery and jQuery's validate extension library: demo
Or you may be asking for a more generic-use observer pattern. If so, try one of the many MVVM/MVC libraries for JavaScript such as backbone.js or knockout.js (also ember, agility, angular, and spine): jsfiddle
edit: also note that if your need is just standard form validation, you can accomplish it in jQuery validate without any code to speak of - just add properties directly on the HTML elements themselves indicating what the validation rules are. Unfortunately, HTML5 data attributes weren't around when it was written, so you apply the validation rules as CSS classes.
edit 2: also note that jQuery validate out-of-the-box supports remote validation, such as the credentials or username-already-exists scenario: demo or documentation
Use jQuery's .submit(), using this you can Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
Example:
$("form").submit(function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
You can also use jQuery's .toggle() to show/hide any div.
Read this W3C article for better understanding of recommendation by W3, Providing client-side validation and adding error text via the DOM (slightly outdated)
You should try jQuery's .change();
Assuming your HTML input has an ID:
<input type='text' id='idOfTheField' name='email'>
You should try:
$('#idOfTheField').change(function(){
//Do stuff with the value.
//Wich is $('#idOfTheField').value() by the way.
});
To manipulate the data with a webserver, you have to perform an AJAX call, following:
$.ajax({
url: "parse.php",
data: {
email:$('#idOfTheField').value()
}
}).done(function() {
// Add the CSS class ".valid" that makes the text field green, for example.
$('#idOfTheField').addClass("valid");
});
I'm just hoping to get an idea on how to go about creating the following functionality on a screen. I've been using webforms in the past so I felt the need to get over it and start using MVC before I get left behid, so to speak.. thus the project is in Asp.NET MVC, (& JQUERY, but have been getting more comfortable with it lately), so I feel it should be do-able at this point)
I basically want an autocomplete. The employee no textbox should act as input, and as the user types, the items below should render/be visible & update, something to that effect. I'm id like to colour code them by relevancy/or by time.
I think I've got the following problems/questions.
1.) How would I submit without a button click.
and my controller would return a JSON result (I'm assuming would be the best route)
2.) Update/Render my results without redrawing/posting the page
3.) Applying the colours (but its minor at this stage)
I know its asking a lot. So thank you in advance.
Any links of tuts would be appreciated as well.
UPDATE
I just relized that how google's search is working would be a perfect example. Autocomplete on the textbox & results start displaying as you type
As your using jQuery and MVC3 the default MVC3 template aslo contains jQuery UI with has an autocomplete widget that is easily adaptable to what your after.
http://jqueryui.com/demos/autocomplete/#remote
Have you considered usign jQuery UI Autocomplete?
It seems to be valid for all the points that you mentioned.
You can check it out here:
jQuery UI Autocomplete
Is it possible to fire a JavaScript method after a form element is considered invalid? Here is my scenario:
There are 2 tabs on the ASPX page. The user has to fill out info on both tabs. The user, while on tab 2 clicks the submit button. However, there is a required field on tab one that needs attention. Do I need to create a custom valuator (either a CustomValidator control or create a new control from the base valuator) to call a JavaScript function to display tab 1 and show where the error is?
Unfortunately, the canned Field Validator controls in ASP.NET Webforms are not very extensible. I've had needs to change the CSS class of an input field to an invalid state upon client-side validation, and I never found a good way to handle this.
I think your best bet might be to do your own client-side validation. I've also looked into this third party product and it seemed to be pretty fully-functional, but I couldn't justify the cost in my case: http://www.peterblum.com/DES/Home.aspx
You can call any js function from your server side code after the validation check on page object and inside the js function you can write the logic to highlight the field which has issue on validation:
if(!Page.IsValid)
{
Page.ClientScript.RegisterStartupScript(typeof(Page), "validate", "myjsfunction();", true);
}
else
{
// type code here
}