AngularJS Form validating even though input is invalid - javascript

I have a form where there are some required inputs that are not within the form tag. The form is validating even though these inputs are not valid.
How can I fix this without moving all inputs inside the form tag?
Specifically I need to have the form be invalid when any inputs associated with the form are invalid. Not just those contained within the element.(i.e. any input with it's form attribute pointing to the form)
example:
http://jsfiddle.net/v6QkB/
<div class="radio-group">
<input type="radio" form="testForm" name="test2" value="a" ng-model="formData.test2" ng-required="true">
<input type="radio" form="testForm" name="test2" value="b" ng-model="formData.test2" ng-required="true">
</div>
<form name="testForm">
<div class="radio-group">
<input type="radio" name="test1" value="a" ng-model="formData.test1" ng-required="true">
<input type="radio" name="test1" value="b" ng-model="formData.test1" ng-required="true">
</div>
<input type="submit" value="submit" ng-disabled="testForm.$invalid">
</form>

You can use the ngForm directive to wrap all elements (outer inputs and form).
According to the docs ngForm is a "nestable alias of form directive. [...] It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined."
Furthermore, "the purpose of ngForm is to group controls, but not to be a replacement for the <form> tag with all of its capabilities (e.g. posting to the server, ...)".
<div ng-form="outerForm">
<div class="radio-group">
...
</div>
<form name="testForm">
<div class="radio-group">
...
</div>
<input type="submit" value="submit" ng-disabled="outerForm.$invalid" />
</form>
</div>

Related

Angularjs radio button group, form valid without any selection

On an angularJS application I have a <form> with a group of radio buttons, I want to force the user to select an option before he validates the form.
Here a simplify version of my HTML code :
<form name="myForm">
<label ng-repeat="option in options">
{{option.name}}
<input type="radio" name="animalOptions" value="option.id" required>
</label>
<button type="submit" ng-disabled="!myForm.$valid">
SUBMIT
</button>
<h1>
{{myForm.$valid}}
</h1>
</form>
I reproduced my issue in this example :
JSfiddle
Why does it prints true instead of false ?
You need to set ng-model to keep the selected value, e.g. $scope.selected (required needs ng-model to work). Also a function is needed to set the model on every click. Validation can be done like this:
<label ng-repeat="option in options">
{{option.name}}
<input type="radio" name="animalOptions" value="option.id" ng-model="selected" ng-click="toggle(option.id)" ng-required="!selected">
</label>
ng-required="!selected" ensures that user has selected an option
Check this example: fiddle example
You need ng-model to set validity of your form input(s).
And use
required
like this in Angular way :
ng-required="true"
Something like this :
<form name="testForm" ng-submit="yourSubmitFunction();" novalidate>
<input type="radio" name="radio" ng-model="rr" value="optionA" ng-required="true"/> optionA
<input type="radio" name="radio" ng-model="rr" value="optionB" /> optionB
<button type="submit" >Submit</button>
</form>

Submit button not working with checkboxes

im making a website for this company and they have to go through this to make deliveries, for some reason my submit button won't work, sorry im new.
the code i pasted is in 2 different section, the script is on the top while the div class is on the body section.
Tried searching the web but cant seem to find a solution.
</script>
<div class="4u12u$(large)">
<input type="checkbox" id="hygiene" name="hygiene"><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety"><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan"><label for="pan">Pan/Wheel Chuck</label>
</div>
I want to do something like "Check all of this before proceeding" thingy.
You are missing the basics, ive chosen to GET the form here as it applies to the url
<form action="#" method="get">
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked="checked">
<input type="submit" value="submit">
</form>
You can learn about html (and other languages) over at https://www.w3schools.com/ they have some good resources to start from.
try this way
<div class="4u12u$(large)">
<form action="your url" method="post">
<input type="checkbox" id="hygiene" name="hygiene" required><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety" required><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan" required><label for="pan">Pan/Wheel Chuck</label>
</form>
</div>

Jquery steps "destroy" method is removing values given by User

I have a Questionnaire form which is break down in steps by using JQuery steps plugin. In the process of form submission there is a certain point where i need to remove steps. When i use "destroy" JQuery steps method, the values filled in the form are lost.
For example:
<form>
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
</form>
I am using following steps:
Convert form into Jquery steps
Opening this form in Simple modal dialog.
User fill this form and close modal dialog.
I am using "destroy" jQuery steps method after closing dialog.
When user re-open simple modal dialog again then i am converting this form into JQuery steps. At that point user see that all filled values in the form are lost.
The problem is at the 4th step. User have filled form at 3rd step. When i converted in back to original HTML, values given by user are lost.
Expected values at 4th step
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="Ishwar Lal" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" selected='selected' />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
but output is:
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
I need to remove JQuery steps from from with filled values. I have read JQuery documentation but not found any idea about this.
I think that you must to store data before you destroy the component. When you destroy a component it is destroyed, nothing else what to do.
If you store the data , then destroy object, and then initialize object with the data you stored. You can store in an array/object/variable, or you can store in sessionStorage / localStorage for use in other pages.

Form HTML with Google Tag Manager

Im trying to add a simple form in a custom html tag manager.
<form action="https://script.google.com/macros/s/AKfycbwZezgQCL5oLqGTfY5_eQxzWCFCy6alsgk6HOJLP0UcanoK6Gsp/exec" method="GET" class="ch-form myForm" novalidate="novalidate">
<div class="ch-form-row">
<label for="input_ico">Nombre:</label>
<input type="text" name="newletter_name" placeholder="Name">
</div>
<div class="ch-form-row">
<label for="input_ico">Sexo:</label>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</div>
<div class="ch-form-actions">
<input type="submit" value="Enviar"/>
</div>
</form>
But I can't publish it, because this error:
Invalid Template modal Invalid HTML, CSS, or JavaScript found in template.
Any idea why? HTML Form is not suportted by GTM?
Solved:
novalidate="novalidate" ---> not supported
placeholder ----> not supported
Just remove this.

How to submit form field values with a link?

How can I submit the values of the textbox and radio button with "testLink1" in the following code:
<cfform name="frmEdit" method="POST" >
<INPUT type="text" name="txtName" value ="" >
<INPUT type="radio" name="typeA" value ="exempt" checked> Exempt
<INPUT type="radio" name="typeA" value ="non_exempt"> Non-exempt
testLink1
</cfform>
I have my own reason to use <a> tag instead of a submit button.
In order to submit the form via a link you will need to use JavaScript. I have rewritten your code below:
<form name="frmEdit" action="test1.cfm" method="POST">
<input type="text" name="txtName" value="" >
<input type="radio" name="typeA" value="exempt" checked="checked"> Exempt
<input type="radio" name="typeA" value="non_exempt"> Non-exempt
testLink1
</form>
Or as Travis suggested below, change the <a> tag like so:
testLink1
This should work for your simple example. All of the fields will be available to you in the FORM scope in ColdFusion.
There is also no reason to use cfform if you are not using any of it's functionality (which your example is not).

Categories