Angular Form Validation Using Ng-Required - javascript

FIDDLE HERE: http://jsfiddle.net/TegFf/48/
I have a form with radio buttons (please Fiddle below) that should validate if:
you choose a radio button that has a dollar amount associated
you choose custom AND enter a value
My problem, I think, is that the Ng-Required I have put on an input field is not properly registering whether it is or is not required.
<input name="donation" type="radio" value="yes" ng-model="manual" required="false">
<input type="number" ng-model="donation" ng-required="manual === 'yes'">

http://jsfiddle.net/TegFf/49/
Couple of things:
First radio input has a different name.
Wrapping the manual amount inside a label together with the radio button prevents you from focusing the field.
An AngularJS form is not valid until all fields are valid, so it's easier if you add more debug code to see which field is actually invalid.

Your first radio button needs to have 'name="donation"' added to it. Another issue is that once variable manual is set to 'yes', it will always stay yes. You should either reduce the number of your variables, or set up a custom validation in a directive.

Related

Form validation in javascript when drop down dependency is involved

I have used ng-disabled for my form validation for ADD button.
i.e. ng-disabled="conditionForm.$invalid". But , My form contains two text boxes which are hidden at first , and when a type is selected from drop down , only the respective Text box div should be visible. The Problem i'm facing is ,when the above ng-disabled validation is used , the ADD button is still disabled when one of the text box is selected and an input is provided. After the second input is also selected from the drop-down , then the ADD button is getting enabled.
Can you please provide me with an alternate validation , where the ADD button can get enabled every time a value is selected from drop down and a valid input is provided.
If you're ng-disabled is on a form being valid or invalid it sounds like those may have required inputs set. If that is case look at using ng-required so you can explicitly set required based on expression. You can then control when the form is valid.
The exact answer: Answer

AngularJS: Enable Button after Multiple Checkboxes as been "checked"

Lets say i have two Questions, each with their respective checkboxes and a "Next->" button. I want to enable the "Next" button, once each Question has at least one checked checkbox. I have everything wrapped around a Form. Something like this
<form name="form_" novalidate>
<div="cont_1" >
<label>
<input type="checkbox" ng-model="data1.enabled" ng-required="!data1.enabled">
</label>
.
.
</div>
<div="cont_2" >
<label>
<input type="checkbox" ng-model="data5.enabled" ng-required="!data5.enabled">
</label>
.
.
</div>
<button ng-disabled="form_.$invalid">
</form>
The problem is that I have to select ALL checkboxes for the button to enable, i dont want that, what i want is for at least one from each question to be checked for the button to enable, it can be 1 & 1, 2 & 3 etc.. but not forcefully ALL of them. Ive used the ng-required with radiobutton before and it does work. Not the same with check boxes though. It seems the $invalid is checking for all of them to comply but that is not what i want.
Thanks in advance!!!
You should not be using ng-required for checkboxes, because required for checkbox means that it has to be selected to be valid. So if you have some checkbox in the form that is required then is has to be checked to have the form being valid.
It works differently for radio buttons. required on radio buttons enforces selection of atleast one value.
Check this
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_required
You should maintain for each question something like a flag which could be set on selecting an answer for that question, and enable the button if these flags for all the questions are set.
ng-required is not the way to go about it.
I agree with Nils - you are hoping to get something out of ng-required that it was not meant to do.
You need to either:
implement logic in some QuestionService that determines how many
checked answers constitutes an answered question, and drive your
view off of that logic, or
create a directive that monitors the checkboxes among its children.
For approach (1) I created a plunker: http://plnkr.co/edit/pON3PmS77oqqe0aj4Fsb

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?
You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');
Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.
The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)

custom validation with jsvalidate

I'm using jsvalidate and I want to require some fields only when the user selects a yes (Sí) on my form here:
A required validation field on jsvalidate is implemented writing class="jsquerired" on the select element. How can I make class="jsquerired" appear if the user clicks "Sí" on my select?
Example:<input class="jsrequired jsvalidate_email texto" name="emailRecomendado" type="text" size="30"/>
It doesn't seem jsvalidate comes with conditional validation out of the box, so you will probably have to come up with a custom validation class for those fields that checks if "yes" was selected -- and if it was, return true (validation passed) if the field is not empty.

Lotus-Notes: Reset Radiogroup via Javascript

I'm currently working on a Lotus Notes solution. We're just using Web forms so client side operations are done via Javascript.
What I want to accomplish is to reset a Group of Radio Buttons. There are 3 possibilities and I want to choose none. (A 'none of them' possibility would be preferable, I know but we are required to reset them)
I currently use:
//Unchecks a single group of Radio Buttons
//groupname - the name attribute of the group which selection needs to be unchecked
function clearRadioButtonGroup(groupName) {
for(i=0;i<document.forms[0].elements[groupName].length;i++) {
document.forms[0].elements[groupName][i].checked = false;
}
}
The problem with this routine is, the Radiogroup gets reset, but on a form submit the old value gets submitted. Any suggestions?
What version of Domino are you using? Since 7.x (I think) a %%Surrogate field gets generated as a hidden field in your HTML that you'll be able to reset, so after deselecting all of the radio button options, you can then clear out the %%Surrogate field and you should then avoid having to select a "None of the above" option.
Matt
The problem is that clearing the radio buttons make no information about them appear in the submitted form data, and Domino seems to interpret that as no change to the field rather than clear the field.
I haven't found any solution to this I really like, but I can think of two options:
Change the radio buttons to include a no choice option.
The alternative is a bit clumpsy:
Add an editable field to the form to use as a flag, hide it from the web browser with css.
Have clearRadioButtonGroup also set the flag field to something.
Have the onChange event of the radio buttons clear the flag field.
In a WebQueryOpen agent, set the radio buttons field to empty if the flag field is non-empty.
Another alternative could be to uses some clever javascript/css trick to hide the no choice option and have clearRadioButtonGroup simply set that choice.
Are you certain that the old value is actually being submitted? Perhaps it just isn't being updated (erased) in the NotesDocument you're editing? Just a hunch...
BTW, you can download a program called Fiddler that will let you inspect the HTTP POSTs, and you can confirm that the POST data doesn't contain any values for that radio button group. That might help narrow down the problem.
Put the following pass thru HTML code on your form:
<input type="hidden" name="FieldName" id="FieldID" value="">
(FieldName and FieldID are the name and id of your radio field on the form)
When you reset your radio through Javascript and submit your document, the field will be reset to blank.

Categories