MVC 3 - Set non-required field to required at the client side - javascript

I'm building an MVC 3 application.
Can I set a non-required field to required in the client-side(using JavaScript / jQuery)?
I need it to be dynamically when things change in the page.
UPDATE: I viewed the source code of my page and saw the window.mvcClientValidationMetadata array which validation-rules are pushed into it. Can I use it for my needs?
Thanks

You can do whatever you want on the client side.
You can hookup to the form submit event and in it check if the field has been filled or not and either submit the form or display an error message as needed.
Of course, if JavaScript is turned off or if the user knows enough this field may end up being not filled, so always check on the server side (in addition to Model.IsValid, you can add checks for fields that you have not specifically added the RequiredAttribute to).
Another alternative, if your validation logic is complex, is to override ModelMetadata to provide custom validation.

You can set validation rule like this:
$('element').rules('add',{
required: true
});
And remove it:
$('element').rules('remove', 'required');
Or you can add custom validation method that will require value conditionally. see this: http://docs.jquery.com/Plugins/Validation/Validator/addMethod

Related

How does one set custom validation on an Angular form?

I am trying to set custom validation on an input field in an Angular app. The validation cannot be set to a pattern, since it is based on the content of another field (e.i. Passwords must match)
A way to do validation in this case is to check for the fields on form input. However, I want to be able to check for the validity in real time, and be able to use CSS classes such as .ng-dirty and .ng-valid, which come when Angular takes care of validation.
I tried to use $scope.formName.inputName.$setValidity(...), but I am running into issues on that end (StackOverflow question here).
Is there another way in AngularJS to set custom validation?
As mentioned if you check
https://docs.angularjs.org/guide/forms#custom-validation
You'll see you can use directives to create your own custom validations, in the example provided the validation is done whenever you input a character.
If you use your browser to inspect the example (username input field) you'll see the classes (ng-not-empty ng-dirty ng-valid-parse ng-touched ng-valid ng-valid-username) being changed on the fly.
If you had a form these classes would be taken into account to change the form.$valid property to true or false. By default if form.$valid is false then you can't submit it.
I know this doesnt answer to your question but I found a couple of directives that can do that for you:
https://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match/
https://github.com/TheSharpieOne/angular-validation-match
Try it out to see if its what you need.

Evaluate validity of fields based on action being performed in Angular

I have a complex Angular form representing a printable document. Form has two buttons to submit the form. One is for saving the working version and another to print the completed form to PDF.
The problem is simple, but more difficult to solve for me. Of course, when you are going to save a working version there will be unfilled fields. There are some allways required fields (such as name and personal ID) which are needed to save the form. Other fields are required only for printing. So the validity of these fields depends on the action (the button clicked by the user). I cannot determine the validity when the user is editing the field (angular validators are fired when fields content is changing), because I dont know which button will be clicked. I need to fire the validation of the whole form after one of the buttons was clicked. At that point I already know the action and can evaluate the validity of the fields (I have a custom angular validator to do this job).
My question is: how to trigger the (re)validation of the whole form from a function? If it is not possible, are there any other solutions to implement the validation described above?
I would prefer a solution where the $valid and $invalid properties of the fields are always set properly. My custom validator can ensure this. But how to trigger it on every field from a function? If it is not possible to trigger the validation by one function call, it is possible to iterate over all fields of the form? (to call the $validate() method of NgModelController)

Custom validation in MDL

I'm currently making an HTML registration form that completely relies on AJAX and JavaScript (no libraries please), also using MDL.
My problem is that I want to validate the email and the username real-time, i. e. onBlur the AJAX makes a call to the server asking whether the email and the username are taken. If yes, I want to mark the inputs as invalid and display a textfield error saying what happened. This, however, doesn't seem to be possible using MDL.
What I tried: use customValidity(), but MDL only realises the change after a keydown, so this doesn't work. I also tired assigning the input divs an is-invalid class, but same problem as before.
What I need: override the validity from JS and trigger MDL into realising that the validity changed and should update elements accordingly.
Is this possible?

Laravel redirect with javascript

I have a form where a user can select a number ranging from 2 to 10. Based on the selected number I'd like to redirect to '/mypage?number=[2..10]' like the way Laravel's redirect() function does. Thus, flashing the old input values to fill the form accordingly. Based on the $_GET['number'] parameter a for-loop is executed printing 2 to 10 input fields.
How can this be done in the most efficient (and meant to be) way? Or do I have to set up a new route like Route::post('mypage/{number}', 'myController#redirectMethod')?
You are probably over-thinking this. If this is in a form, just have the form action be /mypage and set the name of the select to number and the form's method to get. When the form is submitted, it will bring the user to the page. If you'd like it to auto-submit when the user modifies the dropdown, you can submit the form programatically via js/jquery $('#myForm').submit().
There should be no need for additional routes just to handle the number parameter. Use \Input::get('number') to grab the value on the server side.
How will the javascript get {number}
all you need to do in the javascript
location.href
1) Either redirect should take place on the server - when you send params on sever and it brings you the right page or redirects you to the right page.
2) Or you need to generate javascript in laravel_blade and set this logic in the Javascript. Say, generate input fields with extra data- attribute and make javascript to handle this attribute.
3) Or maybe, avoid redirects at all and make javascript generate variable amount of input fields on the same page judging on data-attributes of the button that was pressed.

Zend Framework - Add new input element using javascript

I'm working on a project using Zend Framework.
I'm creating a form on which users can add a set of elements by pressing a + sign.
Zend framework uses subforms and decorators to get array of values from a form.
These will show when the page is displayed
How does the new fields created with Javascript integrate in that model?
The best demo of dynamically adding fields on the client to a Zend_Form with which I am familiar comes from Jeremy Kendall:
http://jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/
The upshot of the technique is to add/call a preValidation() method on the form to check the post for fields missing in the form. If it finds any such fields, then they are added to the form object. By the time isValid() and getValues() are called, all the Zend_Form_Element objects have already been attached to the form, so processing runs as normal.
One suggestion would be to define all input fields that you want to provide using zend form.
But when the form is displayed you could hide certain fields and make them visible by clicking on +.
I think this is the most simple approach because for adding decorators and stuff you would need to change php files on client side and this is not possible.
Another suggestion, you could define several forms. Clicking on + redirectes the user to another form with an added field.

Categories

Resources