validation is not working with the following custom validation (all other standard validation html attributes are working). I have removed inputs in the form that are not applicable.
<form id="regForm" role="form" method="post" action="" accept-charset="UTF-8">
<div class="form-group">
<label for="wards">Your Ward</label>
<select name="fields[ward]" class="form-control">
<option value="" selected="selected">SELECT WARD</option>
<option value="item">item 1</option>
</select>
<p class="help-block">It is important that you select the ward your current membership records reside in!</p>
</div>
<div class="form-group">
<label for="wardOther">Other Ward or Not in Australia?</label>
<textarea class="form-control" id="wardOther" name="fields[wardOther]" rows="4" data-parsley-conditionalrequired='[name=\"fields[ward]\"] option:selected' data-parsley-validate-if-empty data-parsley-success-class="" data-parsley-conditionalrequired-message="This value is required since you did not select an australian ward!"></textarea>
<p class="help-block">Please tell us the Country, Stake, Ward, and Bishops Name you are attending from</p>
</div>
<script>
$(document).ready(function() {
$('#regForm').parsley({
validators: {
conditionalrequired: {
fn: function (value, requirements) {
console.log('fdsafds');
if ($(requirements).val() == '' && '' == value)
return false;
return true;
},
priority: 32
}
}
});
});
</script>
The console.log is not triggering.
The customer validator is not working at your case because you didn't specify the form name value and "data-parsley-validate" to the form definition.
<form id="regForm" role="form" method="post" action="" accept-charset="UTF-8">
Just add name="regForm" and it should work properly.
<form id="regForm" name="regForm" role="form" method="post" action="" accept-charset="UTF-8" data-parsley-validate>
I used a bit different approach for creating custom validator. You can see the working example here http://jsfiddle.net/Hmhjy/
window.ParsleyValidator.addValidator('conditionalrequired',
function (value, requirement) {
console.log('fdsafds');
if ($(requirements).val() == '' && '' == value) {
return false;
}
return false;
}, 32)
.addMessage('en', 'conditionalrequired', 'This value is required since you did not select an australian ward!');
$('#regForm').parsley();
Related
I have a problem on my code. After submitting the form I have a function for validation checking but it seems that the condition on my function won't identify my form name. Here's my code:
Template form part:
<div class="modal-body">
<form name="form.addeditcoursewareModal">
<div class="row">
<div class="small-12 medium-12 large-12 columns">
<label class="stacked">
Question
<input name="question" type="text" class="form-field" placeholder="Question" ng-model="$ctrl.question.data.attributes.question" >
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 large-6 columns">
<label class="stacked">
Question Type: {{ $ctrl.question.data.attributes.question_type }}
<select name="question_type" class="form-field" id="questionType" ng-model="$ctrl.question.data.attributes.question_type" ng-change="$ctrl.getSelectedQuestionType()">
<option value="single">Single</option>
<option value="multiple">Multiple</option>
<option value="true_or_false">True or False</option>
<option value="free_text">Free Text</option>
</select>
</label>
</div>
Validation part:
validateForm(){
this.validatingForm = true;
if (this.question.data.attributes.question_type === 'true_or_false'){
this.question.data.attributes.choices.data[0].attributes.choice = 'True';
this.question.data.attributes.choices.data[1].attributes.choice = 'False';
}
if (this.modalOptions.actionType == 'duplicate'){
this.question.data.attributes.choices.data.forEach((value) => {
delete value.id;
});
}
if (this.modalOptions.type === 'multiple'){
this.validateCheckbox();
}
console.log(this);
if (this.form.addeditcoursewareModal.$invalid || this.invalidMultiple) { // ERROR DETECTED
// Check for an invalid field
angular.forEach(this.form.addeditcoursewareModal.$error, (field) => {
angular.forEach(field, (errorField) => {
if (errorField.$name === 'dynamicForm'){
errorField.dynamicInput.$setTouched();
} else {
// Set field as touched to display invalid field message
if (errorField.$name === 'single') {
this.invalidRadio = true;
}
errorField.$setTouched();
}
});
});
this.validatingForm = false;
} else {
Here's the error I got:
angular.js:14791 TypeError: Cannot read property 'addeditcoursewareModal' of undefined
I already tried renaming my form but the error is the same.
It seems that you are using the controller as syntax. You would need to add $ctrl in front of form.addeditcoursewareModal.
<form name="$ctrl.form.addeditcoursewareModal">
I am trying to add a dropdown list with "Others" option. If user select "Others", Others (Please specify) input box will become Mandatory. How should I validate this case? Right now I added Javascirpt code to valid this. Is there anyway to do this like "Please specify other reason."?
<form name="myForm">
<div ng-app="myApp" ng-controller="myCtrl">
Reason : <select ng-model="reason" ng-options="x for x in names" required></select> <span ng-show="myForm.reason.untouched">The reason is required.</span>
<p>Others (specify): <input type="text" ng-model="others"></p>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["reason1", "reason2", "reason3","Others"];
$scope.addItem = function () {
if ($scope.reason == "Others" && !$scope.others)
{
window.alert("Please specify others");
}
if($scope.others && $scope.reason!='Others')
{
window.alert("Please select reason others");
}
});
</script>
Angular has an ng-required property that allows you to set it conditionally.
<form name="myForm">
<div ng-app="myApp" ng-controller="myCtrl">
Reason : <select ng-model="reason" ng-options="x for x in names" required>
</select> <span ng-show="myForm.reason.untouched">The reason is required.
</span>
<p>Others (specify): <input type="text" ng-model="others" ng-required="reason == 'Others'"></p>
</div>
</form>
I do not have enough English to describe it, but I think you will understand it from the codes.
Basically my problem is that ng-model = "" ng-options = "" does not come up with form data when used together.
<select class="form-control" name="car_id" ng-model="car_id" ng-options="I.car_brand_code as I.car_brand_name for I in CarList" ng-change="GetState()" >
<option value="">Select Car</option>
</select>
The selection box for the brands of these cars
<div class="form-group">
<label class="mtb10">Model Year</label>
<input type="text" name="modelYear" class="form-control" ng-model="data.modelYear" placeholder="Car Year...">
</div>
This is the other form objects. Where ng-model is a different data "data." I can get it. How can I get the value in the selection box.
I need to get the "car_id" value.
Try this :
On change of the dropdown options pass the selected value into the function as a param.
Use array.filter() method to fetch the model year for the selected car based on the car id.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.CarList = [
{
"car_brand_code": 1,
"car_brand_name": "Maruti",
"model_year": 1990
},
{
"car_brand_code": 2,
"car_brand_name": "Ford",
"model_year": 2005
}
];
$scope.GetState = function(carId) {
var selectedCar = $scope.CarList.filter(function(item) {
return item.car_brand_code == carId;
});
$scope.data = {
"modelYear" : selectedCar[0].model_year
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select class="form-control" name="car_id" ng-model="car_id" ng-options="I.car_brand_code as I.car_brand_name for I in CarList" ng-change="GetState(car_id)" >
<option value="">Select Car</option>
</select>
<div class="form-group">
<label class="mtb10">Model Year</label>
<input type="text" name="modelYear" class="form-control" ng-model="data.modelYear" placeholder="Car Year...">
</div>
</div>
I am using a form control which has set of input boxes.
<form class="form-horizontal" role="form">
<input ng-model="editPagename" class="form-control" required/>
<input ng-model="editUrl" class="form-control" required/>
</form>
The value of editPagename is not getting updated in the scope and it's not even entering in the function.
$scope.$watch('editPagename', function(newVal, oldVal) {
console.log(newVal);
});
Do you have any suggestions on how to solve this problem?
try
$scope.$watch( function() {
return $scope.editPagename;
}, function(newVal, oldVal) {
console.log(newVal);
});
As it has been indicated that $scope will go bye bye in the future (you can have a read at this "preparing for the future of angularjs" on airpair, also a link the the youtube video of the ng-europe talk), and you might want to write your code for easy upgrading to 2.x
So, unless you absolutely need $scope for something, try this:
index.html
<body ng-controller="MainCtrl as vm">
<p>Hello {{vm.name}}!</p>
<div>
<form class="form-horizontal" role="form">
<input data-ng-model ="vm.name" data-ng-change="vm.checkValue(vm.name)" class="form-control" required/>
</form>
</div>
</body>
app.js
app.controller('MainCtrl', function() {
vm = this;
vm.name = "world";
vm.checkValue = checkValue;
function checkValue(value){
console.log(value);
}
});
And a plunker link with the example.
No $scope needed. And of what I can tell, does what you are asking.
Its working for me.Here what I have tried.
HTML :
<div ng-controller="testCtrl">
<form class="form-horizontal" role="form">
<input ng-model ="editPagename" class="form-control" required/>
<input ng-model="editUrl" class="form-control" required/>
</form>
</div>
JS :
app.controller("testCtrl",function($scope){
$scope.$watch( 'editPagename', function(newVal, oldVal) {
console.log(newVal);
});
})
Its logging in the console.
EDIT CODE :
Its better to use Objec model rather than primitive datatype.
Here is the code snippet.
HTMl
<div ng-controller="testCtrl">
<form class="form-horizontal" role="form">
<input ng-model ="objEdit.editPagename" class="form-control" required/>
<input ng-model="objEdit.editUrl" class="form-control" required/>
</form>
{{objEdit}}
</div>
JS :
app.controller("testCtrl",function($scope){
$scope.objEdit = {};
})
I'm trying to build a directive for my Angular to help with the integration of form fields. I've implemented Scott Allens solution from his Angular playbook, and it works fine for a normal stacked form.
I need however to adapt it to a horizontal form instead. Here's my code:
Markup
<div form-group>
<label for="name">Name</label>
<input type="text" id="name" ng-model="vm.name">
</div>
formGroup directive
function link(scope, element) {
setupDom(element[0]);
}
function setupDom(element) {
var label = element.querySelector("label");
label.classList.add("control-label");
var input = element.querySelector("input, textarea, select");
var type = input.getAttribute("type");
if (type !== "radio" && type !== "checkbox"){
input.classList.add("form-control");
}
element.classList.add("form-group");
}
function formGroup() {
return {
restrict: "A",
link: link
}
}
The output becomes:
<div form-group="" class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" id="name" ng-model="vm.name" class="form-control">
</div>
And that's fine for stacked form. Since I need a horizontal form, my output needs to look like this:
<div form-group="" class="form-group">
<label for="name" class="control-label col-sm-3">Name</label>
<div class="col-sm-9">
<input type="text" id="name" ng-model="vm.name" class="form-control">
</div>
</div>
I've tried many solutions and I can get it work with single elements like an input, textarea or a select. It becomes much more tricky when I have something like two radio buttons inside my markup like this:
<div form-group>
<label>Active</label>
<div class="radio">
<label>
<input type="radio" name="active" ng-value="true" ng-model="vm.active"> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="active" ng-value="false" ng-model="vm.active"> No
</label>
</div>
</div>
The desired output of the above mentioned code should be:
<div form-group class="form-group">
<label class="control-label col-sm-3">Active</label>
<div class="col-sm-9">
<div class="radio">
<label>
<input type="radio" name="active" ng-value="true" ng-model="vm.active"> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="active" ng-value="false" ng-model="vm.active"> No
</label>
</div>
</div>
</div>
Please notice that the input(s) in the form-group is not fixed. It can be either a single input, textarea, select, a group of radio buttons or checkboxes. I'm lost for how I can make that happen. Any help is appreciated. Thanks!
UPDATE
I made some small changes to Mark Veenstra's code to make it (sort of) working:
function setupDom(element) {
element.classList.add("form-group");
var label = element.querySelector("label");
label.classList.add("control-label", "col-sm-3");
var input = element.querySelector("input, textarea, select");
var type = input.getAttribute("type");
if (type !== "radio" && type !== "checkbox"){
input.classList.add("form-control");
angular.element(input).wrap(angular.element('<div class="col-sm-9"></div>'));
}
var div_radio = element.querySelector("div[class='radio']");
angular.element(div_radio).wrap(angular.element('<div class="col-sm-9"></div>'));
}
This does not work completely as intended with multiple radio inputs since it only wraps the <div> on the first radio input element.
The output from radio button example in my original post using Marks code is:
<div form-group="" class="form-group">
<label class="control-label col-sm-3">Active</label>
<div class="col-sm-9">
<div class="radio">
<label>
<input type="radio" name="active" ng-value="true" ng-model="vm.active" value="true"> Yes
</label>
</div>
</div>
<div class="radio">
<label>
<input type="radio" name="active" ng-value="false" ng-model="vm.active" value="false"> No
</label>
</div>
</div>
SOLUTION
Check out the Plunker with the final result: http://plnkr.co/edit/Wv6V86hHTCz3URS9DhdU?p=preview
In the angular.element documentation you can find the method wrap() to be able to wrap HTML around a selected element. Or see this direct link.
So what you could do in your directive is change the setupDom() function to match your requirements per type of form element.
function link(scope, element) {
setupDom(element[0]);
}
function setupDom(element) {
element.classList.add("form-group");
var label = element.querySelector("label");
label.classList.add("control-label col-sm-3");
var input = element.querySelector("input, textarea, select");
var type = input.getAttribute("type");
if (type !== "radio" && type !== "checkbox"){
input.classList.add("form-control");
input.wrap(angular.element('<div class="col-sm-9"></div>'));
}
var div_radio = element.querySelectorAll("div[class='radio']");
div_radio.wrap(angular.element('<div class="col-sm-9"></div>'));
}
function formGroup() {
return {
restrict: "A",
link: link
}
}
NOTE: This code is not tested, maybe there are some minor mistakes, but I guess you'll get the point now.
Mark's suggestion came close, but it didn't solve my problem completely. I ended up using the following code in my formGroup directive:
(function (module) {
"use strict";
function link(scope, element) {
setupDom(element[0]);
}
function setupDom(element) {
element.classList.add("form-group");
var children = angular.element(element).children();
var labels = children.splice(0, 1);
// Set label classes
labels[0].classList.add("control-label", "col-sm-3");
// Wrap children in div
angular.element(children).wrapAll(angular.element("<div class='col-sm-9'></div>"));
// Handle inputs
var inputs = element.querySelectorAll("input, textarea, select");
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs[i],
type = input.getAttribute("type");
if (type !== "radio" && type !== "checkbox") {
input.classList.add("form-control");
}
}
}
function formGroup() {
return {
restrict: "A",
link: link
}
}
module.directive("formGroup", formGroup);
}(angular.module("app.core")));
Check out this Plunker to see it in action: http://plnkr.co/edit/Wv6V86hHTCz3URS9DhdU?p=preview