In this sample I expected the Email label to be visible above the email input. It appears if I start to edit the input data.
Am I doing something wrong here?
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" value="me#example.com">
</label>
With ng-model in stead of value it will have the expected behaviour. So change your code to
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" ng-model="account.email">
</label>
and add something like the following in your controller
$scope.account = {
email: 'me#example.com'
};
I had a similar problem using AppGyver Supersonic.
I solved controlling the has-input class on my input-label using ng-class, like this:
<label class="item item-input item-floating-label">
<span class="input-label" ng-class="{'has-input': username}">Choose a username</span>
<input type="text" placeholder="Choose a username" ng-model="username">
</label>
The item-floating-label class animates the label as the user types in the input field. Refer documentation for more details.
http://ionicframework.com/docs/components/#forms-floating-labels
For your requirement to always show the label above the input field, you have to use the item-stacked-label
http://ionicframework.com/docs/components/#forms-stacked-labels
Set the placeholder with the same text as the label. In this case placeholder="Email".
The Floating item label works this way.. Until the field is filled, the label will not be visible, instead the placeholder will be visible. Just as you type in the field, the label will appear.The animation is sleek and nice. Just make sure the text is same.(case sensitive.)
Related
I have an input field in a form which is filled but disabled (I am trying to build details view). In the code below titleAccessor.valid returns false.
Any ideas how to overcome this issue ?
<div class="form-group row">
<label class="col-md-3 form-control-label" for="title">{{'contentSalesTextConfig.titleForm'|translate}}</label>
<div class="col-md-9">
<input [disabled]="pageStatus==4" required [ngClass]="{'redBorder': ((titleAccessor.touched||formSubmitted)&&!titleAccessor.valid)}" [ngModel]="textContentMain.title" #titleAccessor="ngModel" name="title" id="title" type="text" class="form-control" placeholder="{{'contentSalesTextConfig.placeHolder.titleForm'|translate}}">
</div>
</div>
NOTE: When i remove [disabled]="pageStatus==4" validation works as it is supposed to..
disabled inputs are considered as invalid inputs , you can use readonly instead of disabled :
<input [readonly]="pageStatus==4" required [ngClass]="{'redBorder': ((titleAccessor.touched||formSubmitted)&&!titleAccessor.valid)}" [ngModel]="textContentMain.title" #titleAccessor="ngModel" name="title" id="title" type="text" class="form-control" placeholder="{{'contentSalesTextConfig.placeHolder.titleForm'|translate}}">
hope this will help :)
I have a form to edit instances of a model (modelName). The model has a description field which is a string. The form is set up like this:
<label class="form-group">
<span class="control-label col-md-3">Description</span>
<span class="col-md-9">
<input class="form-control" type="text" name="description" [(ngModel)]="modelName.description" required />
</span>
</label>
And when the edit form is opened using an instance of the model that has a defined description, the form populates with "false" instead of the description. If I add
{{modelName.description}}
to the label attached to the description input, it prints the string as expected.
I would like the form input to populate with the description string instead of "false"?
Maybe is better to explain with an example.
I have a form with a radio button with YES/NO items.
When a user select NO the fields below the radio button are disabled, while when he click on YES, the fields are enabled.
<form id="myForm">
<h3>Test Form</h3>
<input type="radio" name="radiobutton" id="needabikesino0" onclick="enableDisableAll();" /> Yes
<input type="radio" name="radiobutton" id="needabikesino1" onclick="enableDisableAll();" /> No
<p><input type="text" id="numerobiciclette" name="mybikes" placeholder="bike numbers" disabled /></p>
<p><input type="text" id="altezza" name="myheight" placeholder="my height" disabled /></p>
<p><input type="text" id="numerocaschi" name="myhelmets" placeholder="my helmets" disabled /></p>
</form>
function enableDisableAll() {
cb1 = document.getElementById('needabikesino0').checked;
document.getElementById('numerobiciclette').disabled = !cb1;
document.getElementById('altezza').disabled = !cb1;
document.getElementById('numerocaschi').disabled = !cb1;
}
See here: http://jsfiddle.net/dforce/0u13z7md/
The PROBLEM is:
When the user choose NO on the radio button, is not possible to send the form because the fields are compulsory.
I need the form to be sent even when the user choose NO.
How can I solve this issue?
Thanks for your help!
You could try making the field readOnly?
http://www.w3schools.com/jsref/prop_text_readonly.asp
I would like to create a validator for abide for a set of checkboxes.
Let's consider a set of 5 checkboxes. The user is asked to check 3 max, and at least 1.
So, here is my work-in-progress code:
<div data-abide-validator='checkboxes' data-abide-validator-values='1,3'>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
<script>
$(document).foundation({
validators: {
checkboxes: function(el, required, parent) {
var countC = el.find(':checked').length;
alert(countC);
}
}
});
</script>
At this point, I just try to count the checked inputs. But it seems I can't even trigger the validator... I think I could manage to code my validation stuff if only I could figure out how to trigger it.
Indeed I didn't find many examples of the custom validator, and the official doc did not help me much.
Your HTML markup is not really "correct" for abide. You should be attaching the data-abide-validator attribute to the inputs, not the parent div. Additionally, you need some better markup so abide's default error display can work (and some better use of foundation's grid system to lay it out). I would point you toward the Abide Validation Page on Zurb's site for some examples of form markup.
I've taken the liberty of restructuring your markup to be something that is more becoming of a foundation layout:
<form action="/echo/html/" method="POST" data-abide>
<div class="row">
<div class="small-12 columns checkbox-group" data-abide-validator-limit="1,3">
<label>Check some boxes</label>
<small class="error">You have checked an invalid number of boxes.</small>
<ul class="small-block-grid-3">
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="1" /> 1
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="2" /> 2
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="3" /> 3
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="4" /> 4
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="5" /> 5
</label>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<button type="submit">Submit</button>
</div>
</div>
</form>
As to your JS code. It's not correct either. You need to address the abide -> validators namespace of the options, not just validators. I've rewritten your JS code to not only do that, but give the desired effect you wanted:
$(document).foundation({
abide: {
validators: {
checkbox_limit: function(el, required, parent) {
var group = parent.closest( '.checkbox-group' );
var limit = group.attr('data-abide-validator-limit').split(',');
var countC = group.find(':checked').length;
if( countC >= limit[0] && countC <= limit[1] ) {
group.find('small.error').hide();
//return true so abide can clear any invalid flags on this element
return true;
} else {
group.find('small.error').css({display:'block'});
//return false and let abide do its thing to make sure the form doesn't submit
return false;
}
}
}
}
});
In order to check adjacent elements when doing custom validation, you need to have something to target. The el variable in the validation function will be the DOM element of the input/field that is being validated. The required variable will tell you if the field is flagged as being required or not (boolean). The parent variable will be set to the "parent" of the field. I say "parent" because although the label tag is technically the parent of the input element, abide is smart enough to realize that the label is part of the field's element structure and skip over it to the li element instead.
From there, you need a way to identify a common parent. So I added the checkbox-group class to whatever element I decided to make the "parent" of all the checkboxes in the group. This is not a Foundation or Abide "magic" class, but rather something of my own creation for use in the validation function.
From there, you can easily trace the few lines of the validation function to see the workflow: Find the group container object, parse the limits off the container's data-abide-validator-limits attribute, count the number of checked inputs in the container, check if the number checked is between the limits, display/hide the error message and return true/false so abide knows if the field validated or not.
I've got a working Fiddle of it if you care to check it out yourself ;) Hopefully this was informative for you, and I wish you the best of luck playing with the awesome that is Foundation!
Here's what I have, below, trying to use bits from similar answers here, plus items from the parsley site.. Nothing happens..User is not alerted that at least 1 box must be checked. Do I have this all wrong? Thank you in advance for any clues!
<form action="success.html" id="contact-form" data-parsley-validate>
<label for="language">Please Choose your Language:<br>
<input type="checkbox" class="checkbox" name="language" value="english" parsley-group="language" parsley-mincheck="1">English<br>
<input type="checkbox" class="checkbox" name="language" value="spanish" parsley-group="language" >Spanish<br>
<input type="checkbox" class="checkbox" name="language" value="french" parsley-group="language" >French
</label>
You have some problems with your code:
parsley-group doesn't exist. There is a data-parsley-group and is applicable if you want to validate a portion of your form.
parsley-mincheck="1" doesn't exist. There is a data-parsley-mincheck="1".
Assuming that you require at least one language, but can accept more, this code should do the trick:
<form action="success.html" id="contact-form" data-parsley-validate>
<label for="language">Please Choose your Language:<br>
<input type="checkbox" class="checkbox" name="language[]"
value="english" required>English<br>
<input type="checkbox" class="checkbox" name="language[]"
value="spanish" required>Spanish<br>
<input type="checkbox" class="checkbox" name="language[]"
value="french" required >French</label>
<button type="submit" id="submit-button">Submit form</button>
</form>
$(document).ready(function() {
// bind parsley to the form
$("#contact-form").parsley();
// on form submit, validate form and, if valid, show valid in the console
$("#contact-form").submit(function() {
$(this).parsley("validate");
if ($(this).parsley("isValid")) {
console.log('valid');
}
event.preventDefault();
});
});
If you want the user to select one and only one option, I advice you to use radio buttons.