We Keep Coding

If text boxes are not empty check checkbox

I am trying to figure out how to check if all 4 inputs are filled out then checkmark the contact information check box. If any are not filled out uncheck the checkbox.
Any help with this would be greatly appreciated.
$(document).on('change', '#ContactName, #ContactEmail, #ContactPhone', function() {
if ('#ContactName, #ContactEmail, #ContactPhone' === '') {
$("#contactinformation").prop("checked", false);
} else {
$("#contactinformation").prop("checked", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" />
Contact information
</div>
</div>
</div>

Answer updated to reflect new requirement that BusinessName be optional.
See the comments inline:
// Set up a blur event handler for each text field
$('.form-control:not("#BusinessName")').on("blur", function(evt) {
let count = 0; // Keep track of how many are filled in
// Loop over all the text fields
$('.form-control:not("#BusinessName")').each(function(idx, el){
// If the field is not empty....
if(el.value !== ""){
count++; // Increase the count
}
});
// Test to see if all 3 are filled in
if(count === 3){
$("#contactinformation").prop("checked", true); // Check the box
} else {
$("#contactinformation").prop("checked", false); // Unheck the box
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" disabled />
Contact information
</div>
</div>
</div>

Please try with below code snippet.
<input type="text" class="form-control input-sm InputText" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
$( document ).ready(function() {
$(".InputText").change(function(){
var checkCheckBox= true;
$(".InputText").each(function() {
if ($.trim($(this).val()) != '') {
checkCheckBox = false;
}
});
if (checkCheckBox == true)
{
$("#contactinformation").prop("checked",true);
}
else
{
$("#contactinformation").prop("checked",false);
}
});
});
Add "InputText" class in textbox, if you want to validate this thing.

jQuery validate not checking email format / not working after Ajax submit

I am having two separate issues with implementing the jQuery validation library:
When I try to submit my form with an invalid email address I am not getting a warning message about format. The form is simply not submitting. If the form is correctly filled in the submission is working. If I just have required fields missing the validation is working. What is going wrong with my email format check?
The form can re-appear on the page using Ajax if the customer wants to edit any details. When this happens the validator is not working at all. How can I address this?
This is my original Javascript (all working perfectly):
var detailsform = ('form[id$="register"]');
$('body').on('submit', detailsform, {}, function(event) {
// Serialize the form data and store the ID of the submitted form
var formData = $(detailsform).serialize();
// Stop the browser from submitting the form.
event.preventDefault();
$.ajax({
type: "POST",
url: $(detailsform).attr('action'),
data: formData
}).done(function(data) {
$('html,body').scrollTop(0);
var details = $(data).find("#details");
$("#details").html(details.html());
var delivery = $(data).find("#delivery");
$("#delivery").html(delivery.html());
$('#delivery').removeClass('inactive');
var carttotals = $(data).find("#carttotals");
$("#carttotals").html(carttotals.html());
var payment = $(data).find("#payment");
$("#payment").html(payment.html());
});
});
This is my updated Javascript (with added validation):
var detailsform = ('body form[id$="register"]');
$(detailsform).validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
}
},
highlight: function(element, errorClass) {
$(element).each(function() {
$(this).closest('div').addClass('error');
});
},
unhighlight: function(element, errorClass) {
$(element).each(function() {
$(this).closest('div').removeClass('error');
});
},
messages: {
name: "Please enter your name",
email: {
required: "We require your email address to contact you",
email: "Your email address must be in the format of name#domain.com"
},
},
submitHandler: function(form) {
event.preventDefault();
var formData = $(detailsform).serialize();
$.ajax({
type: "POST",
url: $(detailsform).attr('action'),
data: formData
}).done(function(data) {
$('html,body').scrollTop(0);
var details = $(data).find("#details");
$("#details").html(details.html());
var delivery = $(data).find("#delivery");
$("#delivery").html(delivery.html());
$('#delivery').removeClass('inactive');
var carttotals = $(data).find("#carttotals");
$("#carttotals").html(carttotals.html());
var payment = $(data).find("#payment");
$("#payment").html(payment.html());
});
}
});
<div class="checkout-section" id="details">
<form id="form3_register" action="/shop/checkout" method="post">
<h2>1. Your Details</h2>
<div class="infieldlabel">
<input id="form3_email" name="email" class="checkout-input" type="email" required="required" />
<label class="infield required" for="form3_email">Your Email for Order Confirmation</label>
<input id="form3_password" name="password" value="__auto__" type="hidden" />
</div>
<div class="row">
<div class="infieldlabel half">
<input id="form3_first_name" name="first_name" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_first_name">First name</label>
</div>
<div class="infieldlabel half">
<input id="form3_last_name" name="last_name" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_last_name">Last name</label>
</div>
</div>
<div class="infieldlabel">
<input id="form3_phone" name="phone" class="hascontent" type="text" />
<label class="infield" for="form3_phone">Phone Number</label>
</div>
<div class="checkboxwrapper">
<input id="form3_mailinglist_checkbox" name="mailinglist_checkbox" value="1" type="checkbox" />
<label for="form3_mailinglist_checkbox">Add me to the Newgate Watches mailing list</label>
</div>
<h3>Billing address</h3>
<div class="infieldlabel">
<input id="form3_address_1" name="address_1" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_address_1">Address 1</label>
</div>
<div class="infieldlabel">
<input id="form3_address_2" name="address_2" class="checkout-input" type="text" />
<label class="infield" for="form3_address_2">Address 2</label>
</div>
<div class="row">
<div class="infieldlabel third">
<input id="form3_city" name="city" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_city">Town / City</label>
</div>
<div class="infieldlabel third">
<input id="form3_county" name="county" class="checkout-input" type="text" />
<label class="infield" for="form3_county">County / State</label>
</div>
<div class="infieldlabel third">
<input id="form3_postcode" name="postcode" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_postcode">Postcode / Zip</label>
</div>
</div>
<div class="row">
<h3 class="half">Shipping address</h3>
<div class="checkboxwrapper half">
<input type="checkbox" name="checkbox" id="toshipping_checkbox" />
<label for="toshipping_checkbox">Same as Billing Address</label>
</div>
</div>
<div class="row">
<div class="infieldlabel half">
<input id="form3_shipping_first_name" name="shipping_first_name" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_first_name">First name</label>
</div>
<div class="infieldlabel half">
<input id="form3_shipping_last_name" name="shipping_last_name" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_last_name">Last name</label>
</div>
</div>
<div class="infieldlabel">
<input id="form3_shipping_address_1" name="shipping_address_1" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_address_1">Address 1</label>
</div>
<div class="infieldlabel">
<input id="form3_shipping_address_2" name="shipping_address_2" class="checkout-input" type="text" />
<label class="infield" for="form3_shipping_address_2">Address 2</label>
</div>
<div class="row">
<div class="infieldlabel third">
<input id="form3_shipping_city" name="shipping_city" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_city">Town / City</label>
</div>
<div class="infieldlabel third">
<input id="form3_shipping_county" name="shipping_county" class="checkout-input" type="text" />
<label class="infield" for="form3_shipping_county">County / State</label>
</div>
<div class="infieldlabel third">
<input id="form3_shipping_postcode" name="shipping_postcode" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_postcode">Postcode / Zip</label>
</div>
</div>
<div>
<input value="Continue to Delivery Options" type="submit" />
<input type="hidden" name="cms-form" value="cmVnaXN0ZXI6cGVyY2hfbWFpbGNoaW1wIHBlcmNoX3Nob3A6L3RlbXBsYXRlcy9zaG9wL2NoZWNrb3V0L2N1c3RvbWVyX2NyZWF0ZV9wYXNzd29yZGxlc3MuaHRtbDoxNDc2ODc0MzY1" />
</div>
</form>
</div>
As always help greatly appreciated!

Jquery Validation not working when id is diffrent than name

I have a simple HTML Form and i am trying to validate it using Jquery Validation but for some reason the form is not being validated. Please help.
HTML :
<div class="row">
<div class="col-md-8">
<form novalidate="novalidate" action="http://talentcapture.com/Profile/save_profile" id="update-profile-form" method="POST" class="validateForm">
<fieldset>
<legend>Update Your Profile Information</legend>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="first_name">First Name:</label>
</label>
<div class="col-md-8">
<input name="users[first_name]" value="Jhon" data-required="true" id="users-first_name" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="user_name">Last Name:</label>
</label>
<div class="col-md-8">
<input name="users[last_name]" value="Doe" data-required="true" id="users-last_name" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="street_address">Street Address:</label>
</label>
<div class="col-md-8">
<input name="user_profiles[street_address]" value="" data-required="true" id="user_profiles-street_address" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="locality">Locality:</label> </label>
<div class="col-md-8">
<input name="user_profiles[locality]" value="" data-required="true" id="user_profiles-locality" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="city">City:</label>
</label>
<div class="col-md-8">
<input name="user_profiles[city]" value="" data-required="true" id="user_profiles-city" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="state">State:</label> </label>
<div class="col-md-8">
<input name="user_profiles[state]" value="" data-required="true" id="user_profiles-state" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="country">Country:</label> </label>
<div class="col-md-8">
<input name="user_profiles[country]" value="" data-required="true" id="user_profiles-country" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="zipcode">Zipcode:</label> </label>
<div class="col-md-8">
<input name="user_profiles[zipcode]" value="" data-required="true" data-number="true" id="user_profiles-zipcode" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="company_name">Company name:</label>
</label>
<div class="col-md-8">
<input name="user_profiles[company_name]" value="" data-required="true" id="user_profiles-company_name" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="company_desc">Company Description:</label>
</label>
<div class="col-md-8">
<textarea name="user_profiles[company_desc]" cols="40" rows="10" type="textarea" data-required="true" id="user_profiles-company_desc" class="form-control"></textarea>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="linkedin_url">Linkedin url :</label>
</label>
<div class="col-md-8">
<input name="user_profiles[linkedin_url]" value="" data-required="true" id="user_profiles-linkedin_url" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="company_website_url">Company Website:</label>
</label>
<div class="col-md-8"><input name="user_profiles[company_website_url]" value="" data-required="true" id="user_profiles-company_website_url" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
I have this common method to validate all my forms based on the data- attribute passed to the fields.
JAVASCRIPT
var form = $(".validateForm");
form.each(function(){
var validationRules = {};
var field = '';
$(this).find(':input').each(function(){
field = $(this).attr('id');
if(typeof field !== 'undefined')
validationRules[field]= $(this).data();
});
var error = $('.alert-error', $(this));
var success = $('.alert-success', $(this));
console.log(validationRules);
$(this).validate({
rules: validationRules,
errorClass : 'help-inline error-msg',
errorElement: 'span',
errorPlacement: function (error, element) { // render error placement for each input type
var type = $(element).prop('type');
if(type == 'checkbox' || type == 'radio'){
error.insertAfter(element.closest('.'+type));
error.css('float','none');
} else {
error.insertAfter(element); // for other inputs, just perform default behavoir
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
error.show();
},
highlight: function (element) { // hightlight error inputs
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element) { // revert the change dony by hightlight
$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set error class to the control group
},
});
});
however the Validation does not work and the form gets submitted on blank fields even though all fields are mandatory.

How to activate form field one by one with the valid values user entered

I do have a Form and now I need to activate this form's field one by one. That mean If an user fill out first field correctly (Not empty and should be valid) then I need to activate second one and so on.
This is my HTML form:
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
This is how I tried it in jquery:
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
$('.sequence').on('change blur keyup', enableNextElement);
});
This coding working for me but not work with validation. That mean if an user entered a not valid email next field is activating. But I want to keep next field disable till user entered a valid email.
Can anybody tell me how to do it?
UPDATED HTML
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<div class="element-right">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
Thank you.

your both function call simultaneously and you havent mention sequence class to textboxes so you can try
http://jsfiddle.net/Vishnuk/uqfe2403/6/
html
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name sequence" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Script
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
enableNextElement(event);
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
});

Try this
$(".form-control").focusout(function() {
var t = $(this).val();
var k = $(this);
setTimeout(function() {
if (t) {
k.parent().parent().next(".form-group").find(".form-control").removeAttr('disabled');
} else {
k.parent().parent().nextAll(".form-group").children().find(".form-control").attr('disabled', '');
}
}, 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<div class="form-group element-right">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>

AngularJS Form two way binding

I'm new to angularJS
i'm try to create a registration form using angularJS
but when i press submit it doesn't work.
The ng-disable attribute is working
HTML
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 well" ng-contoller="EditUserController">
<form name="registerUser" class="form">
<legend>Register</legend>
<div class="form-group">
<label for="inputFirstname">First Name :</label>
<input type="text" name="firstname" id="inputFirstname" class="form-control" value="" required title="" placeholder="First Name" ng-model="user.firstname">
</div>
<div class="form-group">
<label for="inputLastName">Last Name :</label>
<input type="text" name="lastname" id="inputLastName" class="form-control" value="" required title="" placeholder="Last Name" ng-model="user.lastname">
</div>
<div class="form-group">
<label for="inputUsername">UserName :</label>
<input type="text" name="username" id="inputUsername" class="form-control" value="" required title="" placeholder="Username" ng-model="user.username">
</div>
<div class="form-group">
<label for="inputEmail">Email :</label>
<input type="email" name="email" id="inputEmail" class="form-control" value="" required title="" placeholder="your email" ng-model="user.email">
</div>
<button class="btn btn-primary" ng-disabled="registerUser.$invalid" ng-click="saveuser(user,registerUser)" >Submit</button>
</form>
</div>
EditUserController.js
motobike.controller('EditUserController',
function EditUserController($scope){
$scope.saveuser = function(user, register){
console.log(register);
if (register.$valid) {
window.alert('suceess');
}
}
}
);
app.js
'use strict';
var motobike = angular.module('motobike', ['ngSanitize']);

change ng-contoller to ng-controller ^^

class="col-xs-8 col-sm-8 col-md-8 col-lg-8 well" ng-contoller="EditUserController"
should be
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 well" ng-controller="EditUserController"
^^