I need to force the user to check at least one checkbox with different names with parsley.
With the same name it works :
<label for="hobbies">Hobbies:</label>
<p>
Skiing <input name="hobbies[]" id="hobby1" value="ski" data-parsley-required type="checkbox"><br>
Running <input name="hobbies[]" id="hobby2" value="run" type="checkbox"><br>
Eating <input name="hobbies[]" id="hobby3" value="eat" type="checkbox"><br>
Sleeping <input name="hobbies[]" id="hobby4" value="sleep" type="checkbox"><br>
Reading <input name="hobbies[]" id="hobby5" value="read" type="checkbox"><br>
Coding <input name="hobbies[]" id="hobby6" value="code" type="checkbox"><br>
</p>
But with different name it doesn't :
<label for="hobbies">Hobbies :</label>
<p>
Skiing <input name="hobbies1" id="hobby1" value="ski" data-parsley-required type="checkbox"><br>
Running <input name="hobbies2" id="hobby2" value="run" type="checkbox"><br>
Eating <input name="hobbies3" id="hobby3" value="eat" type="checkbox"><br>
Sleeping <input name="hobbies4" id="hobby4" value="sleep" type="checkbox"><br>
Reading <input name="hobbies5" id="hobby5" value="read" type="checkbox"><br>
Coding <input name="hobbies6" id="hobby6" value="code" type="checkbox"><br>
</p>
Is there a way to manage this with data-parsley-group or something ?
note : the list of input can be long
I think you can make them related by giving them the same data-parsley-multiple value.
Other possibility is to write a custom validator, something like this.
Require at least one checkbox with Parsley:
data-parsley-required data-parsley-mincheck="1"
Parsley docs on this
<label for="hobbies">Hobbies (Required, 1 minimum):</label>
<p>
Skiing <input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-required data-parsley-mincheck="1"><br>
Running <input type="checkbox" name="hobbies[]" id="hobby2" value="run"><br>
Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eat"><br>
Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep"><br>
Reading <input type="checkbox" name="hobbies[]" id="hobby5" value="read"><br>
Coding <input type="checkbox" name="hobbies[]" id="hobby6" value="code"><br>
</p>
Note: This depends on name for each being the same. Otherwise you can use data-parsley-multiple to link the checkboxes by name prefix. See: http://jsfiddle.net/s7xnt02e/
Related
Say I have a block of html like the following and I need to loop through an array of objects and display a label for each option.
I can do this easily using ng-repeat for the labels and the input individually, but in order for my style framework to update the checked input correctly, the input needs to be directly above the label in the document.
How can I do this without wrapping each group of input + label in another dom element? (This would destroy the style of the list as well)
need:
<input type="radio" name="rGroup" value="1" id="r1" />
<label class="radio radio-plan-lg" for="r1">
Billed every<br><span>1 month</span>
</label>
<input type="radio" name="rGroup" value="2" id="r2" />
<label class="radio radio-plan-lg" for="r2">
Billed every<br><span>3 months</span>
</label>
<input type="radio" name="rGroup" value="3" id="r3" />
<label class="radio radio-plan-lg" for="r3">
Billed every<br><span>6 months</span>
</label>
not:
<input type="radio" name="rGroup" value="1" id="r1" />
<input type="radio" name="rGroup" value="2" id="r2" />
<input type="radio" name="rGroup" value="3" id="r3" />
<label class="radio radio-plan-lg" for="r1">
Billed every<br><span>1 month</span>
</label>
<label class="radio radio-plan-lg" for="r2">
Billed every<br><span>3 months</span>
</label>
<label class="radio radio-plan-lg" for="r3">
Billed every<br><span>6 months</span>
</label>
Use ng-repeat-start:
<input ng-repeat-start="item in array" type="radio" name="rGroup" value="{{item}}" id="r{{item}}" />
<label ng-repeat-end class="radio radio-plan-lg" for="r{{item}}">
Billed every<br><span>{{item}} month</span>
</label>
See Documentation - Special repeat start and end points
I am trying to implement radio button group validation inside angular's ng-repeat.
HTML
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender" ng-model="driver.gender">
</div>
Name attribute should change in each repeat. I tried appending $index value, but it's not working properly when drivers are dynamically added and removed. What is the best way to implement this?
In your code all radio buttons will relate with each other, because name attribute of all is the same. You should identify each radio buttons group. For example:
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
</div>
Just try this If you need like below
Think their is two repeats in model, then code of the view should be like this
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender0" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender0" ngmodel="driver.gender">
</div>
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender1" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender1" ngmodel="driver.gender"/>
</div>
So this is the code for get this
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
</div>
you can change name attribute based on index value , can you check out my answer in following link
In controller
$scope.drivers = [{id:1,name:'test',gender:'M'}];
In html
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ng-model="driver.gender">
</div>
https://plnkr.co/edit/byLRBhUI2Ezc5CofHnPC?p=preview
Finally I found one solution.
<div ng-repeat="driver in drivers">
<div ng-form="radioForm">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
{{radioForm.$error}}
</div>
</div>
Now the validation in happening thorugh the ng-form. Radio buttons will be grouped because $index.
I'm using Angular to create a web app. I have a form with two date inputs:
<label for="date-from">From: </label>
<input class="range-data" type="date" name="date-from" id="date-from" value="">
<label for="date-to">To: </label>
<input class="range-data" type="date" name="date-to" id="date-to" value="">
How to check if two date ranges overlap?
Searching here on SO i have found this answer
<input name="min" type="number" ng-model="field.min"/>
<input name="max" type="number" ng-model="field.max" min=" {{ field.min }}"/>
Do you have any other recommendation?
First, there is not ng-model in your inputs, that is required for the "angular way" of using forms. After that, HTML5 support min and max for dates, when the date need to be supplied in the format of "YYYY-MM-DD". Notice that not all browsers support "date" input.
An optional implementation:
<label for="date-from">From: </label>
<input class="range-data" ng-model="fromDate" type="date" name="date-from" id="date-from" max="{{toDate|date:'yyyy-MM-dd'}}">
<label for="date-to">To: </label>
<input class="range-data" ng-model="toDate" type="date" name="date-to" id="date-to" min="{{fromDate|date:'yyyy-MM-dd'}}">
I'm trying to use Web to Lead functionality of salesforce. I can create a lead, but the Notes field does not get the data I supplied in the form. Here's the form I'm sending:
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="xxxxxxx">
<input type=hidden name="retURL" value="http://www.mycompany.com">
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br>
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" type="text" wrap="soft"></textarea><br>
<label for="street">Street</label><textarea name="street"></textarea><br>
<input type="submit" name="submit">
</form>
Every field gets populated in the new lead entry, except Notes. Has anyone ran into this issue? How did you resolve it?
Thanks in advance!
I haven't got why you have specified type="text" with your textarea. Textarea itself is a type.
Can you replace
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" type="text" wrap="soft"></textarea><br>
With:
Notes:<textarea id="00N6100000C5D5Z" name="00N6100000C5D5Z" wrap="soft"></textarea><br>
Give it a try.
I have a salesforce web to lead form. Everything seems to be going through to salesforce except the comments textarea box. Any idea why just this field wouldn't work?
The code for the texarea field (there is an actual number in id and name)
<form class="sf-form" id="contact-1"
action="https://www.salesforce.com/servlet/servlet.WebToLead?
encoding=UTF-8" method="POST">
<div class="sf-left">
<label class="sf-label">First Name</label><input class="sf-text"
id="first_name" type="text" maxlength="40" name="first_name"
size="20" />
<label class="sf-label" for="last_name">Last Name</label><input
class="sf-text" id="last_name" type="text" maxlength="80"
name="last_name" size="20" />
<label class="sf-label" for="email">Email</label><input class="sf-
text" id="email" type="text" maxlength="80" name="email" size="20"
/>
<label class="sf-label" for="phone">Phone</label><input
class="sf-text" id="phone" type="text" maxlength="40" name="phone"
size="20" />
<label class="sf-label" for="company">Company</label>
<input class="sf-text" id="company" type="text" maxlength="40"
name="company" size="20" />
</div>
<div class="sf-right">
Comments:<textarea name="000number here" id="same 000number here"
class="sf-textarea" rows="10" type="text" wrap="soft" ></textarea>
<br>
<input type="submit" name="submit" class="sf-submit">
</div>
<div class="clearfix"></div>
</form></div>
In debug mode I am getting the following for the textarea field
xxxxxxxx(some long number here): This is another test to get the debug code(long number here): Whatever I put in comments
I'm not sure if those long numbers have to do with their account, I'm not familiar with salesforce... are they debug codes?
Thanks!
Ahh. Well the client was showing the form to Salesforce (they wouldn't give me access) and I guess it is working now. That must've been the issue, because I haven't changed anything on my end. Thanks for your time! – Beth 2 mins ago