Evaluate validity of fields based on action being performed in Angular - javascript

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)

Related

Yii2 - Javascript - finding id of input fields

I have a problem with client validation when showing several model forms on the same page. It's like a list where the user can toggle the input forms, only the ones that are selected will be saved.
I already wrote some javascript code that removes and reinserts the name attribute on each field, but obviously the invisible fields are still being validated, resulting in the user being unable to submit the form.
I already had a look at the "whenClient" validation property in my model, but the problem there is that I don't know how to select the field that is being validated.
If there was only one form on the page, I could easily select each input field, but with many forms the id's are like "modelname-index-attribute".
So I would need to access the field being validated with javascript or find another way to submit the form.
By the way, I also tried to remove all the hidden forms on submit, but if a visible form has errors, the form would not be submitted and the deleted fields could not be made visible. I also encountered a strange behaviour where the client validation doesn't happen when I remove and reinsert a form using javascript, but this would be a different issue.
I add form fields like this:
<?= $form->field($model, '['.$i.']attribute')->textInput(...); ?>
Any ideas?

Ext JS Search button which is attached to form

So basically I wanted to make a thing like this. A search button which is disabled. than when somebody enters something in one of the fields of the form I want button to enable itself and if somebody cleans every input up than I want to disable that button back. So my Idea was something like this. Extend the button provided by Ext JS. and somehow when this button is drawn or initialized, attach event of value changed to its upper form's input fields. so basically when somebody changes value of any input, that method attached as a listener will be called and than with help of some logic I can achieve the thing I want. but there is one problem. I don't really see how to do that. I mean I have some guesses but all of them have led me to the dead-end. So can you suggest what can I look at or from where to start ?
You can use formBind to enable/disable button depending on the validity state of the form. Validity of the form fields are checked against the validators set for form fields (like allowBlank: false). See the Example usage here
Another way to validate is to use VTypes
But, for the specific requirement to enable button if user enter values in any one of the fields, you might require custom validators. Sample fiddle here: https://fiddle.sencha.com/#fiddle/5qe

Jquery val is not working when try to get a value from a form

I've tried to insert a form in woocommerce product page. I've inserted the form in the product page. When the form is submitted I'm trying to get the email (form input value) and validate it accordingly.
The problem is I'm not able to get the value in some theme using jQuery. I see the form and its elements in firebug. But jQuery is not even working for the click event in variable product (woocommerce product page). Here the form is inside their form (which enctype is multipart/form-data), this might be one reason or if I place the form above the variable product form jQuery it works but it returns empty string.
Even if there is some text inside the form input field, it returns empty string.
Here is the form
Here is the jQuery On submit click
jQuery(document).ready(function() {
jQuery('.mailsub').click(function() {
var subaddress = jQuery('.subemail').val();
console.log(subaddress);
if ( jQuery('.subemail').length > 0 ){
console.log('the element with element_id exists in the DOM');
}
//ajax goes here followed by validation for the email
return false;
});
});
I've tried to check whether it is in DOM or not, so I've used the code, it says the element with element_id exists in the DOM.
I'm able to get the form completely work on twentyeleven and defaults themes. It is working in wordpress defaults themes but not in some other third party themes.
What might be the problem? Any suggestion would be much helpful.
The HTML and code as given should mostly work. I'm guessing that there is another element with the class subemail earlier in the document. When you do jQuery(".subemail").val(), jQuery finds all of the matching elements, but then returns the value (if any) of only the first of them.
Side note: If you step through the code with the debugger built into your browser, rather than doing console.log statements, you can inspect variables as the code is running, which is dramatically more educational, usually.
Side note 2: Some browsers submit forms when the user presses Enter in a text field. In that case, the click event on the submit button may not be fired (since the button wasn't clicked). To reliably hook into the form submission process, use the submit event on the form, rather than the click event on the button.
Side note 3: You've said you're using ajax to validate the email address. By default, ajax calls are asynchronous, which means you cannot use the result from the server to decide whether to submit the form, because you don't get the result until after the submit event handler has returned and (probably) the form has already been submitted. You can make the ajax call synchronous, but that locks up the UI of most browsers while the call is in progress, leading to poor user experience. I suggest validating the email address via ajax when the field changes, and then again on the server when it receives the form (you can never rely on client-side validation). That lets you give the user proactive feedback (the on-change validation) without trying to validate it via ajax when submitting the form.

JavaScript form validation library that supports custom rules with flexible callbacks

It seems jQuery validation plugin only supports validation rules for submission check. What if I want callbacks instead of submission when certain rules are satisfied, how can this be done in the plugin?
For e.g. I might want to display a message if every field in the form is filled, and another message if not. I want to bind this to field change event as well as submission. But as long as a required subset of fields are filled, the form can be submitted regardless of whether every field is filled.
Or is there some library that can do this? Thanks for any help!
jquery-validate allows you to supply your own submitHandler, which gets called if the form validates instead of submitting the form. This callback can display a message and then submit the form for real.
Documentation of validate options

remove params from form request

Upon user interaction, I need to remove certain input params from an HTML form before submission. Using javascript to remove the input fields from the DOM doesn't seem to actually remove the params from being sent through the request.
Is there a way to delete or clear the actual request params?
You could disable them.
formElement.disabled = true;
I am not sure if I am following your question exactly or not. But the way I read it, you have a set of fields in a form and when you submit, you are relying in the native form post behavior which places all the fields into the post.
My initial reaction would be to make the post yourself, using Ajax. Then you have complete control over what values are passed along and what are left behind.
That being said, if Ajax is not an option for whatever reason, what you could do is create a second, hidden form which is responsible for the actual posting. When you submit the visible form, you can copy the values you actually want submitted over to the hidden version, and them programatically post that one.

Categories

Resources