I have a button that is set to be disabled until the form is valid. However, depending on the situation some of the form fields are also disabled. My problem is, I need the user to only be required to fill in non-disabled form fields but angular doesn't seem to be validating the disabled fields.
<button ng-click="form.checkVerify(); appCtrl.pageLoad('spec')" ng-disabled="checkVerifyForm.$invalid" class="btn btn-lg btn-success pull-right">Complete</button>
<form name="checkVerifyForm">
<div class="col-md-6">
<fieldset ng-disabled="!form.dataStore.reqMake">
<label for="makeRec">Maker Recourse</label>
<div class="form-group">
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecYes" value="1" /> Yes
</label>
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecNo" value="0" /> No
</label>
<span id="helpBlock" class="help-block">Is there adequete recourse...</span>
</div>
Now I have seen some pretty intense directives that accomplish the task, but is there something simple that can be done in the controller to overcome this specific situation?
You can use e.g. ng-required to achieve that.
<input ng-change="form.justify()"
ng-model="form.verify.mRec"
type="radio"
name="makeRec"
id="makeRecYes"
value="1"
ng-required="form.dataStore.reqMake" /> Yes
AngularJS input documentation
Related
The problem:
Working within a Saas environment that processes a form in a way that needs to be altered. It's software-as-a-service so unique changes system wide are not an option.
Attempted Solution:
Attempting to use Javascript which the system is adding to the header area of the page to change the value of a form ID so when the form is submitted it contains the altered value.
The Code:
HTML
<div class="form-group " data-field="how_to_apply">
<label class="form-label">How to Apply </label>
<div id="application-settings" class="form--move-left clearfix row">
<div class="form-group form-group__half">
<input id="via-email" name="ha" value="1" checked="checked" onclick="displayInput(false, 'how_to_apply_1');" type="radio" />
<label for="via-email" class="form-label">
By Email<br/>
</label>
<input value="systemapplied#emailaddress.com" class="form-control" name="how_to_apply" id="how_to_apply_1" type="email" />
</div>
<div class="form-group form-group__half">
<input id="via-site" name="ha" value="2" onclick="displayInput(false, 'how_to_apply_2');" type="radio" />
<label for="via-site" class="form-label">
By URL
</label>
<input value="" class="form-control" name="how_to_apply" id="how_to_apply_2" disabled="disabled" type="url" required placeholder="e.g. http://www.yourwebsite.com"/>
</div>
</div>
Attempting to change the email address assigned to how_to_apply_1 ID
Javascript Used
document.getElementById("how_to_apply_1").value = "new#emailaddress.com";
It is important to add that this works as expected in a CodePen area but does not on the live site so my assumption is that there is something over writing this someplace I am not seeing, or I need to use something else to force the change, I don't know. Any suggestions or help would be GREATLY appreciated
Thanks in advance...
You need to run your script when the DOM is ready. You can wrap your script in DOMContentLoaded event like this:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("how_to_apply_1").value = "new#emailaddress.com";
});
I am using Parsley JavaScript validation library in a Spring MVC project. I am trying to validate a 'required' radio button group.
I want to display the validation message after the last radio button in the group. To achieve this i am adding data-parsley-errors-container="#element" attribute to the last radio button but Parsley is not using this custom error container. The error message wrongly gets displayed after the first radio button. In my case the error container will be added dynamically to the radio button group, but it's not working even when i am adding it inline.
Please find the JSFiddle sample code here https://jsfiddle.net/8ja2sm98/9/
<script>
$(document).ready(function() {
$("#commentForm").parsley();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<div class="form-group required">
<label for="gender" class="control-label">Gender</label>
<div class="radio">
<label><input id="gender1" name="gender" type="radio" value="M" data-parsley-multiple="gender" data-parsley-id="17">Male</label>
</div>
<div class="radio">
<label><input id="gender2" name="gender" type="radio" value="F" data-parsley-multiple="gender" data-parsley-errors-container="#genderError" required>Female</label>
</div>
<span id="genderError" style="background-color:blue;"></span>
</div>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</form>
You're missing data-parsley-errors-container="#genderError" on the "male" input.
I'm referring to the Toggle buttons with checkboxes which I don't understand. There we have the example (I have added some ids):
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="c1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input id="c2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input id="c3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
I can click on the third button or use $('#c3').closest('.btn').button('toggle') to set the third button as pressed. That is visually okay. However, the checkbox input does not get the checked attribute, and that is what I'm missing. Why doesn't this happen automatically? Am I required to do this manually?
Update and solution:
As Marcos Pérez Gude revealed: The inspector of Firefox (or Elements in Chrome) doesn't show changes regarding the checked state of a checkbox. There you can modify or see other things but currently (Firefox 40) the checked state cannot be trusted. That was my fault.
On document ready I'm setting a radio button to checked, I want the user to see the button as highlighted/discolored. But nothing is showing in the view.
Here is my html. Nothing shows it as being checked in the view or HTML. It's the same color as all the other radio buttons.
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="0" autocomplete="off"> House
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="1" autocomplete="off"> Apartment
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="2" autocomplete="off"> Studio
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="3" autocomplete="off"> Other
</label>
</div>
Here is my jquery.
if ($("#YogaSpaceType").val() != "") {
var t = $("#YogaSpaceType").val();
var element = '#SpaceType.' + t;
//$(element).prop('checked', true);
$('input:radio[id=SpaceType][id=0]').prop('checked', true);
}
I tried both lines including the one that is commented out.
If I add 'checked' to the element like below the HTML shows it as checked but I see nothing in the view as checked, it still looks unchecked.
<input type="radio" name="typeoptions" id="0" autocomplete="off" checked> House
It looks like you want to change this a bit to be more like http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/. The problem here is you are trying to use the input keyword in jquery, but your html is button groups.
From that page, the HTML is:
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
and then the JS is $('input:radio[name=sex]')[2].checked = true;
If it's necessary to leave them as button groups, you'll need to change your JS line to be more like $("#0").prop('checked', true). You could also chain the div ids together like this: $("#SpaceType #0").prop('checked', true);
It was a little confusing, but the class attribute 'active' needs to be added to the label. Not the checked attribute. This is a little confusing but understood now.
$('input[type="radio"][id="0"]').prop('checked', true)
Multiple value check for id, will end up in 0 elements.
I'm using parsley.js to validate a form. It appears to work fine except the checkbox is not being validated. I've tried adding other checkboxes and using data-min-check, but none of them are being validated. I've tried adding data-parsley-trigger with various events, makes no difference.
No errors appear in the console. And I'm using the latest version of parsley. Any ideas?
<form action="form.php" method="POST" id="form" data-parsley-validate>
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email"
placeholder="Enter email" required
data-parsley-maxlength="128"
data-parsley-maxlength-message="Cannot exceed 128 characters."
data-error-message="Required field."/><br/>
<label for="agreeTerms">
<input form="form" type="checkbox" id="agreeTerms" name="agreeTerms" required/>
I have read and agree to the terms and conditions
</label>
<div class="submitbutton">
<button type="submit" value="submit" class="btn btn-xlarge" style="width: 100%">Enter Here to Win
</button>
</div>
</form>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/parsley.js"></script>
There were various bugs with radio and checkbox inputs with parsley 2.x < RC5.
I strongly recommend you to upgrade your parsley version to latest.
Sorry for the inconvenience.
I was having the same problem, so I decided to put an invisible checked checkbox with CSS.
Parlsey's validation works fine with two, so one is always checked. The only thing you need to modify is the error messsage because the default will not work in our case. Here is my example and works.
<label for="ingredients">Select ingredients:</label>
<p>
<!-- Check the error message-->
Cheese <input type="checkbox" name="hobbies" value="ski" data-parsley-mincheck="2" data-parsley-error-message="You must select at least one choice" required data-parsley-group="block2"/>
Ham <input type="checkbox" name="hobbies" value="run" />
Mushrooms <input type="checkbox" name="hobbies" value="eat" />
<!--This is the important part-->
<input type="checkbox" name="hobbies" value="eat" style="visibility:hidden" checked/>
<p>