I'm running into problems trying to validate a multipage form using Parsley. My client is using a multipage jquery plugin that retrieves all the fieldsets within the form, and displays the questions in each fieldset, step by step. It also has a built-in validation function that I can customize, which is called each time the user clicks the button to get to the next step.
I've grouped my checkboxes together with data-parsley-group='fieldset1', and on the next page, data-parsley-group='fieldset2', etc etc. Then, from within the built-in validation function of my multipage plugin, I'm calling:
jQuery.fn.validatePage = function(page) {
return $(this).parsley().validate('fieldset' + page);
}
(page is an incrementor, starting at 1). If jQuery.fn.validatePage returns true, the multipage jquery plugin increments page and moves on to display the next step.
Parsley validation works exactly as expected on the first page. However, once validation returns true from page 1, and then the second page is displayed, parsley validate always returns true, even if required fields are left empty. It's almost as if I need to 'reset' the parsley validation, but since I am validating on a specific data-parsley-group, this shouldn't be necessary. Here is the HTML markup (bear with me on the code, tried to clean it up a bit but it is being created dynamically through our CMS for now:
<form id="survey-form" method="post" data-parsley-validate="data-parsley-validate" data-parsley-errors-container="#survey-form .error-container" class="js_multipage-form">
<div class="error-container"></div>
<fieldset>
<div class="title section">
Question 1
</div>
<div class="checkbox section">
<input type="checkbox" name="selectiongroup" value="Item 1" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/> Item 1
<input type="checkbox" name="selectiongroup" value="Item 2" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/> Item 2
<input type="checkbox" name="selectiongroup" value="Item 3" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/> Item 3
<input type="checkbox" name="selectiongroup" value="Item 4" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/> Item 4
<input type="checkbox" name="selectiongroup" value="Item 5" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/> Item 5
</div>
</fieldset>
<fieldset>
<div class="title section">
Question 2
</div>
<div class="checkbox section">
<input type="checkbox" name="selectiongroup" value="Item 1" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset2" class="form_field form_field_checkbox"/> Item 1
<input type="checkbox" name="selectiongroup" value="Item 2" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset2" class="form_field form_field_checkbox"/> Item 2
<input type="checkbox" name="selectiongroup" value="Item 3" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset2" class="form_field form_field_checkbox"/> Item 3
<input type="checkbox" name="selectiongroup" value="Item 4" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset2" class="form_field form_field_checkbox"/> Item 4
</div>
</fieldset>
</form>
I've been trying for hours to get this to work as expected, but to no avail. Is there another technique that would be worth looking into? I saw that Parsley 1.0 had a different multipage solution where it was not running validation on the :hidden elements. I tried using the exclude option to hide these, but that didn't work with this multipage plugin, either.
Any suggestions would be greatly appreciated. Sorry if this code is so verbose, I tried including all possibly relevant code I could.
You need to add a json object to the validate funciton
jQuery.fn.validatePage = function(page) {
return $(this).parsley().validate({group:'fieldset' + page});
}
See example at http://parsleyjs.org/doc/examples/multisteps.html
Related
I have a menu with different sections, these sections filter some results depending their "section" (which can be 1, 2 or 3):
<div class="menu">
<label class="section" ng-click="changeLoc('Section1')">
<input type="radio" id="optradio" ng-model="searchText.Section" value="1">
<p>Section 1</p>
</label>
<label class="section" ng-click="changeLoc('Section2')">
<input type="radio" id="optradio" ng-model="searchText.Section" value="2">
<p>Section 2</p>
</label>
<label class="section" ng-click="changeLoc('Section3')">
<input type="radio" id="optradio" ng-model="searchText.Section" value="3">
<p>Section 3</p>
</label>
</div>
I want the site URL to change depending the section clicked
Example of normal url: www.normal-site.com
Example with a section clicked: www.normal-site.com/Section1
The problem is that my code is inside an iFrame.
I have a script like this:
$scope.changeLoc = function(newRoute) {
$location.path(newRoute);
}
...but the parent site won't change the URL. I tried something like this, but I doesn't work:
$scope.changeLoc = function(newRoute) {
parent.$location.path(newRoute);
}
Also I wish to know how to have a certain section checked if people enter the URL with the specific path written. Example: people write "www.normal-site.com/Section2", and the "section 2" input to be checked when the page loads.
Thanks in advance!
I have 3 check-boxes in my form and it allows multiple selection. My database has more than one value for that particular column and those data must be retrieved and have my check-boxes checked. For a single value i got the output. This must be achieved using classic asp.
<input id="_mover" type="checkbox" name="company_type" value="Mover" <%if rs("COMPANY_TYPE")="Mover" then%> checked="true" <%End If%>>
<label for="mover">Mover</label>
<input id="_lender" type="checkbox" name="company_type" value="Lender" <%if rs("COMPANY_TYPE")="Lender" then%> checked="true" <%End If%>>
<label for="lender">Lender</label>
<input id="_childcare" type="checkbox" name="company_type" value="Childcare Center" <%if rs("COMPANY_TYPE")="Childcare Center" then%> checked="true" <%End If%>>
<label for="childcareCenter">Childcare Center</label>
Use InStr
<%if InStr(rs("COMPANY_TYPE"),"Mover") <> 0 then%>
I created this simple example: http://jsfiddle.net/5Bh59/.
If you switch between AngularJS 1.2.1 and 1.1.1, you'll see the radio buttons don't work properly in either version. If you watch the radio button's $dirty field, 1) for version 1.1.1, it will only be set when the first button is clicked, and 2) for version 1.2.1, it will only be set when the last button is clicked.
I read this answer: AngularJS Radio group not setting $dirty on field but I don't really understand the answer. Not only that but the fiddler example demonstrates the same behavior.
So, is this a bug in AngularJS and how can I work around it?
You either need to give each radio button input a different name, or you need to wrap each radio button in an ng-form (each of which have a different name). If you use two inputs with the same name in the same form, only the last one will be bound to the property on the FormController. If you use different names, then each input will have its own property on the FormController.
Example with different names for each radio button:
http://jsfiddle.net/BEU3V/
<form name="form" novalidate>
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.myRadio1.$dirty}}<br />
Field1 $dirty: {{form.myRadio2.$dirty}}<br />
Value: {{myRadio}}
</form>
Example wrapping with ng-form:
http://jsfiddle.net/39Rrm/1/
<form name="form" novalidate>
<ng-form name="form1">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
</ng-form>
<ng-form name="form2">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.form1.myRadio.$dirty}}<br />
Field2 $dirty: {{form.form2.myRadio.$dirty}}<br />
Value: {{myRadio}}
</form>
If you'd like a single check for the radio group, you can wrap all the radio buttons in their own ng-form and call it something like name="radioGroup".
http://jsfiddle.net/6VVBL/
<form name="form" novalidate>
<ng-form name="radioGroup">
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Group $valid: {{form.radioGroup.$valid}}<br />
Group $dirty: {{form.radioGroup.$dirty}}<br />
Value: {{myRadio}}
</form>
This answer is related but perhaps not exactly applicable, but after finding and reading this item I felt it valuable to provide, and I don't have enough points to just comment on an answer (which I thought would have been a more appropriate way to respond).
My issue was that I wanted to show a required error (using ng-messages) but when you tabbed through / past the radio button group $touched didn't turn true unless you shift-tabbed back from the next UI element back to the last radio button of the group. (When my form renders the radio buttons are not set - I'm wanting the user to make a selection and not rely on the user accepting a default.)
Here's my code:
<div class="form-group" ng-class="{'has-error': pet.genderId.$invalid && pet.genderId.$touched}">
<label class="control-label">
What is your pet's gender?
<span ng-messages="pet.genderId.$error" ng-show="pet.genderId.$invalid && pet.genderId.$touched">
<span ng-message="required">(required)</span>
</span>
</label>
<div>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="1" required ng-blur="pet.genderId.$setTouched();" />Male</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="2" required ng-blur="pet.genderId.$setTouched();" />Female</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="3" required ng-blur="pet.genderId.$setTouched();" />Not sure</label>
</div>
</div>
The 'magic' was adding the ng-blur attribute to set 'touched' myself even if only the first radio button was tabbed past.
You may be able to employ a similar tactic for $dirty by calling $setDirty() in the ng-changed attribute.
I have a few forms. Each form have a few possible radio buttons and a submit button. Only one radio button can be checked (using the same name attribute for each radio). How can I get the checked radio button's value when the form is submitted, using angularjs? #blesh advised to use the same ng-model for each input, but note that the problem is that the input tags are generated using ng-repeat, and this is where the problem starts. I need, of course, naturally, only one button for a bunch of inputs. It is well described in the following plunker, after playing with #blesh 's Answer: http://plnkr.co/edit/5KTQRGdPv3dbP462vq1a?p=preview In it, you can see that the alert shows the initial value and not the current selected input.
Your radio button's value will be available on whatever scope property you've assigned ng-model="" to on the input element. Try something like this:
JS
app.controller('MyCtrl', function($scope){
$scope.submitForm = function (){
alert($scope.radioValue):
};
$scope.radioValue = 1;
});
HTML
<form name="myForm" ng-controller="MyCtrl" ng-submit="submitForm()">
<label><input type="radio" name="test" ng-model="radioValue" value="1"/> One</label>
<label><input type="radio" name="test" ng-model="radioValue" value="2"/> Two</label>
<label><input type="radio" name="test" ng-model="radioValue" value="3"/> Three</label>
<div>currently selected: {{radioValue}}</div>
<button type="submit">Submit</button>
</form>
And, so you can see it working, here is a plunker demonstrating the example
just add $parent in ng-model .
<form name="myForm" ng-submit="submitForm()">
<label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
<div>currently selected: {{radioValue}}</div>
<button type="submit">Submit</button>
</form>
Combination with ng-value
app.controller('MyCtrl', function($scope){
$scope.submitForm = function() {
*****
};
$scope.radioBtn = {
name: 'radioButton'
};
$scope.radioValueOne = {"id": "1", "value": "whatever you want"};
$scope.radioValueTwo = {"id": "2", "value": "whatever you want"};
$scope.radioValueThree = {"id": "3", "value": "whatever you want"};
});
<form name="myForm" ng-controller="MyCtrl" ng-submit="submitForm()">
<label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueOne"/> One</label>
<label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueTwo"/> Two</label>
<label><input type="radio" name="test" ng-model="radioBtn.name" ng-value="radioValueThree"/> Three</label>
<div>currently selected: {{radioBtn.name}}</div>
<button type="submit">Submit</button>
</form>
I faced this problem and found a really simple and clean solution. Here's what you should do.
In your controller, make an empty object with any name("radioValue" in this case).
In your HTML file, use same 'ng-model' for each radio button/input with same name as that of object joining 'name' attribute of each radio button(that too should be same for each button) separated by a period(.) as shown in code snippet.
The Controller
var radioValue={};
...
...
console.log($scope.radiovalue) //use JSON.strinigify if naccessary
The HTML File
<input type="radio" name="somename" ng-model="radioValue.somename" value="1"/>
<input type="radio" name="somename" ng-model="radioValue.somename" value="2"/>
<input type="radio" name="somename" ng-model="radioValue.somename" value="3"/>
//Don't forget to mention value attribute. ng-model does the work by identifying the radio-buttons/inputs by value attribute
The Output you should expect
{"somename":"1"} //if radio-button with value "1" is selected.
My web application uses forms laid out as in the example below...
First Name [____________]
Last Name [____________]
Gender () Male () Female
The markup I use is something like...
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</fieldset>
I have the following issues that I don't know how to solve...
I want to have the WHOLE GROUP of radio buttons labelled like any other field (as in the diagram above), but there is nothing to link the label to (i.e. nothing for its "for" attribute, since each radio in the group has its own label just for the value of the individual radio button) A label without a "for" attribute will not pass accessibility compliance.
The <legend> element of the fieldset seems to duplicate the function of the label. Is this really necessary?
I had thought about styling the <legend> tag to appear as though it's a label, and dispense with the label altogether for the radio button group, but that seems a bit hacky to me, and will also introduce complexities elsewhere in my code (which relies on <label> elements to do some nifty validation message markup and various other things)
Thanks in advance.
The first part of Ssollinger's answer is correct:
The code should be:
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</fieldset>
When assistive technology hits the male radio button, most will read as: "Gender: male radio button 1 of 2 not selected."
Then you could use CSS on the fieldset, legend, the labels and inputs. If memory serves correctly fieldsets can be a bear to style, so i might end up adding a <div> to it:
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
<legend>Gender</legend>
<div>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</div>
</fieldset>
Adding this <div> has no accessibility implications.
Like in the comment in ssollinger's answer, you could dump the fieldset and legend approach, but you would need to build everything to make it accessible, an example of a build out
I had thought about styling the <legend> tag to appear as though it's a label, and dispense with the label altogether for the radio button group, …
This is the correct way to do it. "Gender" is not a label for anything, the labels for the radio boxes are "male" and "female". "Gender" is the legend of the fieldset which groups the radio buttons together. The correct way to implement this form is to remove the "Gender" label and just leave the fieldset with legend "Gender".
Technically, you could probably add a <div> around the radio buttons and point the for= of the "Gender" label to that, but I'm quite sure that this will cause accessibility problems (haven't tried it with a screen reader though) so I would strongly recommend to get rid of the label for "Gender".