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
}
Related
I have a form with many different input fields (some of them are not really input but behave as inputs).
When submitting the from from the regular button click each field is validated through angular validation and html - such as required, ng-maxlength, minlength, etc..
Now we want to add a shortcut to submit the form on keyboard click. That code is running from the controller behind the html. How can I check the validity of the form from there? I know I can get the form by document.forms["myForm"] but can I use that somehow to check the validity same way as .$valid is working in the html? Could I somehow show the error messages on the html as well?
I tried to add jQuery validation plugin for that but seems like it is too much work to change the entire validation mechanism
Don't get the form withdocument.forms["myForm"]".
It's bad practice to use DOM manipulation inside a controller.
You can access the form with $scope.myForm. But beware of the fact that it will be initialised asynchronously.
But that shouldn't be a problem when you want to access the form after a keyboard click.
When you access the form with $scope.myForm you can iterate throw the $$controls. In this object are all form fields.
For example you can do it like this:
angular.forEach($scope.myForm.$$controls, function(value, key) {
value.$setDirty();
value.$setTouched();
});
And one more reminder when you use angular don't try do use JQuery for everything. If you want to use plugins search for angular plugins
I have the following problem:
I have a form where a user can opt to toggle a switch (Yes/No).
If they select Yes, I hide a couple of fields on my template (because they will now automatically be calculated).
The catch is that now, a set of different fields are required to not be empty for the successful submission.
The first fields need not be optional after the switch is clicked (since they are merely hidden but still submitted), but the second set of fields must be non-empty.
Is there a simple way to get this dynamic validation behaviour using Symfony's sfValidator classes, or should I simply hack together a solution using jQuery?
This sounds like a perfect case for the Callback constraint that already exists in Symfony. To quote the linked doc:
The purpose of the Callback constraint is to create completely custom validation rules and to assign any validation errors to specific fields on your object. If you're using validation with forms, this means that you can make these custom errors display next to a specific field, instead of simply at the top of your form.
This solves the backend, you still need to watch out for the required attributes of your fields so HTML5 validation can work properly.
I have a custom web control which has two html select field and buttons i use them to make associated and available list box.But in few situations i have to Validate that Associated field must have at least 1 entity. I implemented a client side custom validator to confirm that. and its working great but issue is i am unable to fire Validate at the time List box is made empty it fires when i click save button and similarly when i have moved a few entries in associated List. validation Message is stile there and removes only when i click save button.
So i want to know how can i fire validator when i need using javascript...
To fire a validator from javascript we may use ValidatorValidate(document.getElementById('validator clientID'))
for more details see http://fczaja.blogspot.in/2009/07/aspnet-how-to-trigger-client-side.html
I know with a form, I can get the $valid property to check whether the entire form is valid. Is there a way to get the validity of a form but ignore undirtied fields whose only rule is "required"?
I have a form that has a save button and a next button. This form is part of a series of forms. When the user clicks on save, I want full validation, but if the user clicks on "next", I want it to validate (and alert the user) for all fields except those who have no validation rules on them other than the "required" flag. This is so that I can save a partially completed form without having to alert the user to the missing fields until later (because they will want to save progress on their forms without having to complete them altogether).
Perhaps there's a way to get the fields with a jQuery selector/filter of some kind?
Not sure I completely understand the question and your use case, but it somewhat sounds like you may need to use custom form validation.
http://docs.angularjs.org/guide/forms#custom-validation
(you may need to scroll down a bit when first loading the link)
Basically you may need to add your own custom directive to control the validity of the inputs you have in mind.
Alternatively, and maybe not quite the "Angular" way, you can avoid using the data binding between the fields and model, effectively opting out of Angular validation. Obviously losing the data binding may be a bigger issue for you but you could get at those values with code outside of your Angular stack.
I have stumbled upon the issue when I need to retract html controls I've added client-side using JavaScript after the postback (due to server-side validation - this is not optional).
Please tell me if the way I'm trying to achieve this is cr*p and there's a better way of doing this.
basically, what I'm doing is cloning a textbox control for up to 10 times on the page when the user hits "Add" and storing entered values from each of those texboxes in a hidden field to read from in the code behind. This works fine, however, when the server side validation doesn't pass after postback, all those dynamically added (cloned) texboxes disappear, since ViewState knows nothing about them.
I am considering 2 possible solution, both of which seem hacky:
Rebuild all cloned textboxes on document onload() using stored values in the hidden field
wrap the form in ajax update panel and place the cloned texboxes outside of it, thus, not refreshing this part of the screen on postback
now, is it possible to somehow "update" ViewState to make it aware of all the html controls I've added using client-side script? Any better ideas? I'd like to achieve this with client-side script, therefore not considering cloning textboxes on server-side, sorry.
You cannot modify the ViewState on the client side. If you do, you will invalidate the viewstate and receive an error on the postback.
In your case you might want to consider using javascript and jQuery to render the text boxes on the document ready event with the values stored in your hidden field. I'd recommend taking a look at jQuery templating, particularly if you can store your data as JSON in the hidden field (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as-official-jquery-plugins.aspx).