I have 2 inputs and upon clicking the button I want to check if 1 input is really validated or not (this is to bypass all the validation to check only 1)
I can revalidate it, but I want some boolean feedback if it is validated.
something similar to ' var isValidStep = fv.isValidContainer($tab); '
Thanks.
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fFname" class="child">First Name</label>
<input name="legalFirstName" class="form-control req" id="fFname" autocomplete="off" type="text" />
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fLname" class="child">Last Name</label>
<input name="legalLastName" class="form-control req" autocomplete="off" id="fLname" type="text" />
</div>
<button type="button" value="Submit" class="btn btn-success easing-effect btn-padding btn-submit subbutton" name="submit" id="subbutton">Submit</button>
<script>
$('.rootwizard').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
live: 'enabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// Name Validation
locale: 'en',
fields: {
legalFirstName: {
live: 'enabled',
trigger: 'blur',
validators: {
stringLengthName: {
max: 30,
},
notEmptyName: {},
regexpName: {
regexpName: /^[a-zA-Z][a-z\sA-Z0-9.,$;]*$/,
}
}
},
legalLastName: {
live: 'enabled',
trigger: 'blur',
validators: {
stringLengthName: {
max: 30,
},
notEmptyName: {},
regexpName: {
regexpName: /^[a-zA-Z][a-z\sA-Z0-9.,$;]*$/,
}
}
}
}
});
$('.btn-submit').click(function() {
$('.rootwizard').formValidation('revalidateField', 'legalFirstName');
});
add 'form' tag to your html and change type button to 'submit' like this :
<form class="rootwizard">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fFname" class="child">First Name</label>
<input name="legalFirstName" class="form-control req" id="fFname" autocomplete="off" type="text" />
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="form-group btn-group-bottom">
<label for="fLname" class="child">Last Name</label>
<input name="legalLastName" class="form-control req" autocomplete="off" id="fLname" type="text" />
</div>
<button type="submit" value="Submit" class="btn btn-success easing-effect btn-padding btn-submit subbutton" name="submit" id="subbutton">Submit</button>
</form>
Related
I want to open a modal dialog box only when form is completely validated with no error. At first i have disabled my button so that it should validate first and it should be enable only when form is validated. I am using jquery validation for this but does not get the result which i want. I want when user click submit button if fields are not filled it should not open modal.
here is my HTML code
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-white" type="reset">Cancel</button>
<!-- Trigger the modal with a button -->
<button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal" disabled />Confirm</button>
</div>
</div>
and me jquery for this
(function() {
$('#PasswordForm > input').keyup(function() {
var empty = false;
$('#PasswordForm > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#myBtn').attr('disabled', 'disabled');
} else {
$('#myBtn').removeAttr('disabled');
}
});})()
The form validation which i used is
$(document).ready(function()
{
$('#PasswordForm').formValidation({
message: 'This value is not valid',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
{
NPassword:
{
validators:
{
notEmpty:
{
message: 'The password is required and can\'t be empty'
}
}
},
RPassword:
{
validators:
{
notEmpty:
{
message: 'The confirm password is required and can\'t be empty'
},
identical:
{
field: 'NPassword',
message: 'The password and its confirm are not the same'
}
}
}
}
});
});
<form id="PasswordForm" method="post" class="form-horizontal" action="/HRM/HRM.PasswordChange">
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Employee Name</label>
<div class="col-sm-10">
<input type="text" disabled="" value="##UserName##" class="form-control">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">New Password</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<input type="password" name="NPassword" placeholder="New Password" class="form-control">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Retype Password</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<input type="password" name="RPassword" placeholder="Retype Password" class="form-control">
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-white" type="reset">Cancel</button>
<!-- Trigger the modal with a button -->
<button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal" disabled />Confirm</button>
</div>
</div>
</form>
any suggestion or help would be appreciated.
Try to change your button to:
<button type="button" id="myBtn" class="btn ban-primary">Confirm</button>
And add following function:
$('#myBtn').on('click', function(){
if(!empty) {
$('#myModal').modal('toggle');
}
});
You have to make empty a global variable.
(untested code)
I have a list of text inputs in a form with the same name, as in an array of input elements. how can i use jquery validation plugin to validate each of these input elements. below is a snippet of what if what I have done so far.
HTML
<?php echo form_open('setup/new_session_validate/'.$school->university_alias, 'class="cmxform form-horizontal tasi-form" id="school_form" method="post"') ?>
<div class="form-group">
<label for="session_name" class="col-sm-2 control-label">Session title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="session_name" name="session_name" />
</div>
</div>
<div class="form-group">
<label for="session_start_date" class="col-sm- col-sm-2 control-label">Start date for session</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="session_start_date" name="session_start_date" />
</div>
<label for="session_end_date" class="col-sm-4 col-sm-2 control-label">End date for session</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="session_end_date" name="session_end_date" />
</div>
</div>
<header class="panel-heading grey">
Semester 1
</header>
<div class="panel-body" style="border-bottom:1px solid #eee; padding:2% 0% 2% 0%">
<div class="form-group">
<label for="semester_1_start" class="col-sm-2 control-label">Start date</label>
<div class="col-sm-4">
<input type="text" class="form-control semester_start_dates" id="semester_1_start" src="1" name="semester_start_dates[]" />
</div>
<label for="semester_1_end" class="col-sm-2 control-label">End date</label>
<div class="col-sm-4">
<input type="text" class="form-control semester_end_dates" id="semester_1_end" src="1" name="semester_end_dates[]" />
</div>
</div>
</div>
<header class="panel-heading grey">
Semester 2
</header>
<div class="panel-body" style="border-bottom:1px solid #eee; padding:2% 0% 2% 0%">
<div class="form-group" style="">
<label for="semester_2_start" class="col-sm-2 control-label">Start date</label>
<div class="col-sm-4">
<input type="text" class="form-control semester_start_dates" id="semester_2_start" src="2" name="semester_start_dates[]" />
</div>
<label for="semester_2_end" class="col-sm-2 control-label">End date</label>
<div class="col-sm-4">
<input type="text" class="form-control semester_end_dates" id="semester_2_end" src="2" name="semester_end_dates[]" />
</div>
</div>
</div>
<div class="panel-body" style="">
<div class="form-group">
<div class="col-sm-1">
<button type="button" class="btn btn-danger close_session_form">Cancel</button>
</div>
<div class="col-sm-1 pull-right">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>
</div>
javascript
$.validator.setDefaults({
submitHandler: function(form){
form.submit();
},
ignore: [],
});
// validate school form on submit
$('#submit').click(function(){
$("#school_form").validate({
rules: {
session_name: "required",
session_start_date: "required",
session_end_date: "required",
},
messages: {
session_name: "Please enter an identification for the session",
session_start_date: "Please enter a start date for the session",
session_end_date: "Please enter a end date for the session",
}
});
var i = 1;
$(".semester_start_dates").each(function(){
$("#semester_"+i+"_start").rules("add", {
required: true,
messages: {
required: "Please enter a start date for semester "+i+" of the session"
}
});
$("#school_form").validate().element("#semester_"+i+"_start");
i++;
});
var j = 1;
$(".semester_end_dates").each(function(){
$("#semester_"+j+"_end").rules("add", {
required: true,
messages: {
required: "Please enter an end date for semester "+j+" of the session"
}
});
$("#school_form").validate().element("#semester_"+j+"_end");
j++;
});
});
Note it tries to validate the elements but error message placement malfunctions.
I am using bootstrap in my web page and trying to make a form on that page.
I've used the standard classes of bootstrap for making the form. I've already used the validation to check the emptiness of the form. I just want to add the email and phone number validation further in my code.
The code for the form and the and the already declared validation script is given below:
<script type="text/javascript">
function validateText(id) {
if ($("#" + id).val() == null || $("#" + id).val() == "") {
var div = $("#" + id).closest("div");
div.removeClass("has-success");
$("#glypcn" + id).remove();
div.addClass("has-error has-feedback");
div.append('<span id="glypcn' + id
+ '" class="glyphicon glyphicon-remove form-control-feedback"></span>');
return false;
} else {
var div = $("#" + id).closest("div");
div.removeClass("has-error");
$("#glypcn" + id).remove();
div.addClass("has-success has-feedback");
div.append('<span id="glypcn' + id
+ '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
return true;
}
}
$(document).ready(function() {
$("#contactButton").click(function() {
if (!validateText("contactName")) {
return false;
}
if (!validateText("contactEmail")) {
return false;
}
if (!validateText("contactMobile")) {
return false;
}
if (!validateText("contactAddress1")) {
return false;
}
if (!validateText("contactCity")) {
return false;
}
$("form#contactForm").submit();
}
);
});
<form class="form-horizontal" id="contactForm">
<div class="form-group">
<label for="contactName" class="col-sm-2 control-label">Name<sup>*</sup></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contactName">
</div>
</div>
<div class="form-group">
<label for="contactEmail" class="col-sm-2 control-label">Email<sup>*</sup></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contactEmail">
</div>
</div>
<div class="form-group">
<label for="contactMobile" class="col-sm-2 control-label">Mobile
Number<sup>*</sup>
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contactMobile">
</div>
</div>
<div class="form-group">
<label for="contactAddress1" class="col-sm-2 control-label">Address1<sup>*</sup></label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="contactAddress1"></textarea>
</div>
</div>
<div class="form-group">
<label for="contactAddress2" class="col-sm-2 control-label">Address2</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="contactAddress2"></textarea>
</div>
</div>
<div class="form-group">
<label for="contactCity" class="col-sm-2 control-label">City<sup>*</sup></label>
<div class="col-sm-10">
<select class="form-control" id="contactCity">
<option>KURUKSHETRA</option>
<option>PEHOWA</option>
<option>KARNAL</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<p>
<span id="helpBlock" class="help-block"><sup>*</sup> marked fields
are compulsory!</span>
</p>
</div>
<div class="checkbox">
<label> <input type="checkbox"> I agree to the <a href="#">Terms of
Service</a>
</label>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<center>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block"
id="contactButton">
Submit <span class="glyphicon glyphicon-arrow-right"> </span>
</button>
</p>
</center>
</div>
</form>
You should use a regex like mentioned in the comment.
The regex is also mentioned here.
var email_regex = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
Here is a working example.
you have to require additional plugin for this.
Try this:
<form id="emailForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="email" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#emailForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
</script>
Original Issue:
My form is hitting the validation correctly but submitting when it shouldn't be.
Following http://formvalidation.io/examples/ajax-submit/
Viewing my console I don't see any of the log statements in the .on "error" section or the "success" printed out. And the page just posts to itself. With the data in the url. I don't know what I'm missing here as basically it skips all .on statements.
What is going on here?
Remember Validation works just non of the .on statements.
HTML:
<form id="service_path_form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Service Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="service_path_name" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">IP</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="service_path_ip" placeholder="IP" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-8">
<textarea class="form-control" name="service_path_description" rows="3" placeholder="Write a short Description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Enable</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="1" /> Enabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="0" /> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-4">
<button type="submit" class="btn btn-primary" name="validate" value="Validate and Submit">Validate and Submit</button>
</div>
</div>
<input type="hidden" name="created_by" value="{{request.user}}">
<input type="hidden" name="date_created" id = "date_created" value="">
JS:
<script>
$(document).ready(function() {
$('#service_path_form')
.bootstrapValidator({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
service_path_name: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The Service Path Name is required'
},
}
},
service_path_ip: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The destination ip address is required'
},
ip: {
message: 'The ip address is not valid'
}
}
},
service_path_enabled: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'Do you want this service path to be actively monitored?'
}
}
}
}
})
.on('err.form.fv', function(e) {
e.preventDefault();
console.log(e)
console.log('test')
})
.on('success.form.fv', function(e) {
// Prevent form submission
console.log("MADE IT HERE")
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
// Use Ajax to submit form data
console.log("MADE IT HERE")
$.ajax({
url: "/servicepathapi/v1/servicepaths/",
type: 'POST',
data: $form.serialize(),
success: function(result) {
console.log(result)
}
});
})
});
</script>
CURRENT:
Update with suggested upgrade:
I tried #Arkni 's suggestion, while I feel like it's in the right direction with I'm now getting this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'app/scripts/js/bootstrap/bootstrap.min.js' %}" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="{% static 'form_validation/js/formValidation.js' %}" ></script>
<script src="{% static 'form_validation/js/framework/bootstrap.min.js' %}" ></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#service_path_form')
.formValidation({
framework: 'bootstrap',
icon: {
With this output:
FIX:
While checking all of my source files I noticed that I was actually loading jquery 2.0.2 and 2.1.3, removing 2.0.2 fixed the issue.
As you said in your question, you are using FormValidation not BootstrapValidator.
So to solve your problem, replace this
$(document).ready(function() {
$('#service_path_form')
.bootstrapValidator({ // <====
with
$(document).ready(function() {
$('#service_path_form')
.formValidation({ // <====
Some notes:
FormValidation is the new name of BootstrapValidator from version 0.6.0.
BootstrapValidator is deprecated and not supported anymore.
See this guide to upgrade from BootstrapValidator to Formvalidation.
Since you're using FormValidation, you should try to remove jquery.validate.min.js as I am afraid of the confliction.
This jsfiddle works properly:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendor/formvalidation/css/formValidation.min.css">
<form id="service_path_form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Service Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="service_path_name" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">IP</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="service_path_ip" placeholder="IP" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-8">
<textarea class="form-control" name="service_path_description" rows="3" placeholder="Write a short Description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Enable</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="1" /> Enabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="0" /> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-4">
<button type="submit" class="btn btn-primary" name="validate" value="Validate and Submit">Validate and Submit</button>
</div>
</div>
</form>
The scripts:
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#service_path_form')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
service_path_name: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The Service Path Name is required'
},
}
},
service_path_ip: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The destination ip address is required'
},
ip: {
message: 'The ip address is not valid'
}
}
},
service_path_enabled: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'Do you want this service path to be actively monitored?'
}
}
}
}
});
});
</script>
Here is the result showing how it looks like:
I hope it helps you.
I am trying to show text based on each of the input's in my form having a value entered or a box ticked.
I can't seem to figure out how to get this to work for all the input fields.
Any ideas?
<div class="container" ng-app ng-controller="OrderFormController">
<div class="row form-group">
<div class="well">
<label for="description" class="col-sm-3 control-label">Extinguisher Status</label>
<div ng-if="myForm.inputs != null">show something</div>
<div class="input-group"></div>
</div>
</div>
<form name="myForm">
<div class="row form-group" ng-repeat="input in inputs">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{input.name}}</label>
<div class="input-group">
<input type="text" class="form-control" required placeholder="Enter {{input.name}}" ng-model="entered">
<!-- <span type="button" class="glyphicon glyphicon-ok" ng-if="input.name==' Geo Location:'"></span> -->
<span ng-class="{'input-group-addon danger' : !entered, 'input-group-addon success': entered}" ng-init="isActive = false">
<span ng-class="{'glyphicon glyphicon-remove': !entered, 'glyphicon glyphicon-ok': entered}" ng-init="isActive = false">
</span>
</span>
</div>
</div>
</div>
<div class="row form-group" ng-repeat="check in checks">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{check.name}}</label>
<div class="btn-group" data-toggle="buttons">
<label ng-class="{'btn btn-danger': !isActive, 'btn btn-success': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive">
<input type="checkbox" autocomplete="off" required ng-model="entered"> <span ng-class="{'glyphicon glyphicon-remove': !isActive, 'glyphicon glyphicon-ok': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive">
</span>
</label>
</div>
</div>
</div>
</form>
</div>
Controller:
function OrderFormController($scope) {
$scope.inputs = [{
name: 'Fire Extinguisher Number:',
id: 1,
active: false
}, {
name: 'Extinguisher Location:',
id: 2,
active: false
}, {
name: 'Geo Location:',
id: 3,
active: false
}];
$scope.checks = [{
name: 'Visual Inspection:',
id: 4,
active: false
}, {
name: 'Weight:',
id: 5,
active: false
}, {
name: 'Gague:',
id: 6,
active: false
}, {
name: 'Hose:',
id: 7,
active: false
}, {
name: 'Service Complete:',
id: 8,
active: false
}];
}
The best what you can do, is to bind input fields and checkboxes to properties of the objects $scope.inputs and $scope.checks respectively. Like this:
for inputs:
<div class="row form-group" ng-repeat="input in inputs">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{input.name}}</label>
<div class="input-group">
<input type="text" class="form-control" required="" placeholder="Enter {{input.name}}" ng-model="input.value" />
<span ng-class="{'input-group-addon danger' : !input.value, 'input-group-addon success': input.value}">
<span ng-class="{'glyphicon glyphicon-remove': !input.value, 'glyphicon glyphicon-ok': input.value}"></span>
</span>
</div>
</div>
</div>
and like this for checks:
<div class="row form-group" ng-repeat="check in checks">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{check.name}}</label>
<div class="btn-group" data-toggle="buttons">
<label ng-class="{'btn btn-danger': !check.active, 'btn btn-success': check.active}" ng-click="check.active = !check.active">
<input type="checkbox" autocomplete="off" required="" ng-model="check.active" />
<span ng-class="{'glyphicon glyphicon-remove': !check.active, 'glyphicon glyphicon-ok': check.active}"></span>
</label>
</div>
</div>
</div>
After that it's easy to check that everything is entered and selected:
$scope.isValid = function() {
var inputsFilled = $scope.inputs.every(function(el) {
return el.value;
});
var allChecked = $scope.checks.every(function(el) {
return el.active;
});
return inputsFilled && allChecked;
};
HTML:
<div ng-if="isValid()">show something</div>
Demo: http://plnkr.co/edit/HDYK7cJqN8jkLvQmojB0?p=info