I have form, where exist few required fields Example
<div class="form-group">
<label class="col-md-3 control-label" for="mpassword">Password<span class="required"> * </span></label>
<div class="col-md-3">
<input type="password" id="mpassword" name="mpassword" class="form-control" placeholder="Enter password"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="memail">Email <span class="required">* </span></label>
<div class="col-md-3">
<input type="email" id="memail" name="memail" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="mname">Full name<span class="required">* </span></label>
<div class="col-md-3">
<input type="text" id="mname" name="mname" class="form-control" placeholder="Enter name" value="MyName"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="mname">Nick name</label>
<div class="col-md-3">
<input type="text" id="mname" name="mname" class="form-control" placeholder="Enter nickname"/>
</div>
</div>
Problem, i don't know what is correct way to get all required fields as they don't have required attribute or class. Only labels have required class, which means "this input is required"
Just target the labels, and then get the inputs based on the for attribute
$('label:has(.required)').map(function() {
return $('#' + $(this).attr('for'));
});
Note that two of the form elements have the same name ?
$('.required').next().find('input').each(function() {
// handle elements
});
Related
Hey everyone am trying to make a validation for a form with AngularJS in Thymeleaf
<form name="registerForm" novalidate="">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label>Lastname *</label>
<input id="lastname" type="text" ng-model="lastname" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Firstname *</label>
<input id="firstname" type="text" ng-model="firstname" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Date of birth *</label>
<input id="birth" type="date" ng-model="brith" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>email *</label>
<input id="email" type="text" ng-model="email" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Username *</label>
<input id="user" type="text" ng-model="user" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Acount Type *</label>
<select ng-model="accout" class="form-control" required="required" >
<option selected="">StartUp</option>
<option>Entreprise</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.pass.$invalid, 'has-success': registerForm.pass.$valid}">
<label>Password *</label>
<input id="pass" name="pass" type="text" ng-model="pass" ng-minlength="6" class="form-control" required="required" />
<span class="text-danger" ng-show="registerForm.pass.$error.minlength">Password Too Short</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.confpass.$invalid, 'has-success': registerForm.confpass.$valid}">
<label>Confirm Password *</label>
<input id="confpass" name="confpass" type="text" ng-model="confpass" class="form-control" equals-to="registerForm.pass" required="required" />
<span ng-show="!registerForm.confpass.$error.required && registerForm.confpass.$error.equalsTo">Vérifiez votre mot de passe</span>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger pull-right" >Sign Up</button>
</div>
</div>
</div>
</form>
This actually work in a simple HTML Page in Thymeleafi get this kind of error
The entity name must immediately follow the '&' in the entity reference
i've tried replacing the && with &&
the form validation wont work , am not having any errors but i don't think that the conditions are correct.
Thymeleaf Doesn't Support &&.
You use 'and' instead of '&&'.
For Example :
<span ng-show="!registerForm.confpass.$error.required and registerForm.confpass.$error.equalsTo">Vérifiez votre mot de passe</span>
Given the following HTML
<form class="form-horizontal"
asp-controller="Installation"
asp-action="CreateUser"
method="post">
<fieldset>
<!-- Form Name -->
<legend>Account Creation</legend>
<!-- Username input-->
<div class="form-group">
<label class="col-md-4 control-label" for="userName">Username</label>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span class="has-error" asp-validation-for="UserName"></span>
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-4">
<input id="email"
name="email"
type="text"
placeholder="jane#doe.com"
class="form-control input-md"
required=""
asp-for="Email">
<span class="help-block">Enter your e-mail address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password"
name="password"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="Password">
<span class="help-block">Enter a password that is at least 8 characters, fewer than 30</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="confirmPassword">Confirm Password</label>
<div class="col-md-4">
<input id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="PasswordConfirmation">
<span class="help-block">Re-enter your password</span>
</div>
</div>
<!-- Submit -->
<div class="form-group">
<label class="col-md-4 control-label"
for="createAccount"></label>
<div class="col-md-4">
<button id="createAccount" type="submit" name="createAccount" class="btn btn-primary">Create Account</button>
</div>
</div>
</fieldset>
</form>
I would like to hide/show the usernameTip span, when the asp-validation-for span contains a validation error, along with any other span that i'm using as a tip when there is an adjacent asp-validation-for span.
Reading this post I can get the JavaScript needed to show/hide the span. The only thing I can't figure out is if the View actually has knowledge of the validation errors in a manor that lets me conditionally hide/show that usernameTip span if errors exist.
Does anyone know what I need to do in order to toggle the visibility based off the data annotation errors on my model?
When looking in Chrome, asp-validation-for span is turned into this at compile time:
<span class="has-error field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">Usernames must be between 2 and 50 characters</span>
EDIT
When validation fails, there is a ==$0 appended to the end.
Usernames must be between 2 and 50 characters == $0
I do not see any classes being added or removed from the span when the validation fails.
Edit 2
I got this working using the accepted answer. For those looking in the future however, you can use MVC's ViewData property in the view to determine if there are errors.
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
#if (ViewData.ModelState[nameof(AccountCreationViewModel.UserName)] == null || ViewData.ModelState[nameof(AccountCreationViewModel.UserName)].Errors.Count == 0)
{
<span class="help-block">Enter a unique Username</span>
}
else
{
<span class="label label-danger" role="alert" asp-validation-for="UserName"></span>
}
</div>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span id="error" class="has-error" asp-validation-for="UserName"></span>
</div>
<script>
if( $("#error").text().length>0){
//show usernameTip
}
</script>
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.
I am new in angularjs, i want to have a filed form from database when the user want to update his profile. I have a webservice that can give all information for the logged user then another webservice to get the information that i need with the id of the user.This is my controller:
controller('myTalentisCtrl', function ($scope,$http) {
this.User_Talent={};
this.T_User={} ;
$http.get("/LoggedUser").success(function(data) {
alert(data);
this.T_User.lnId = data.lnId;
alert(this.T_User.lnId);
});
$http.get("/usertalent",this.T_User.lnId).success(function(data) {
alert(data);
this.User_Talent.user = data.user;
this.User_Talent.talent = data.talent;
});
$scope.modif=function(){
$http.put('updating/' + this.T_User.lnId, $scope.User_Talent).success(function(data) {
$scope.User_Talent = data;
});
};
this is a part of my form:
<div ng-controller="myTalentisCtrl" class="tab-content no-margin">
<!-- Tabs Content -->
<div class="tab-pane with-bg active" id="fwv-1">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="full_name">First Name</label>
<input type="text" ng-model="User_Talent.talent.strFirstName" class="form-control" name="first_name" id="first_name" data-validate="required" placeholder="Your first name" />
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="control-label" for="address_line_2">Address</label>
<input ng-model="User_Talent.talent.strAdress" class="form-control" name="address_line_2" id="address_line_2" placeholder="(Optional) your Address" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="full_name">Last Name</label>
<input type="text" ng-model="User_Talent.talent.strLastName" class="form-control" name="last_name" id="last_name" data-validate="required" placeholder="Your last name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="city">City</label>
<input ng-model="User_Talent.talent.strCity" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="door_no">Phone Number</label>
<input ng-model="User_Talent.talent.lnPhone" class="form-control" name="phone_no" id="phone_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="zip">Zip</label>
<input ng-model="User_Talent.talent.lnZipCode" class="form-control" name="zip_no" id="zip_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email Adress</label>
<div class="input-group">
<span class="input-group-addon">
<i class="linecons-mail"></i>
</span>
<input ng-model="User_Talent.talent.strEmail" type="email" class="form-control" placeholder="Enter your email">
</div>
<!-- <label class="control-label" for="city">Email Adress</label>
<input ng-model="User_Talent.talent.strEmail" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" /> -->
</div>
</div>
Is there a way to initialize my ng-model with the existing values ?
you should perform a digest cycle to reflect the changes in the DOM.
Look into digest
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Relatively new to Angular, and trying to create a form that is used for both create and edit operations. There are forms fields that I am hoping to share, but from what I understand ng-include creates a new scope, so my fields (using ng-model) are not bound to the original scope. The result is that when the form is submitted my fields are not sent in.
If I am going about this the wrong way, please direct me to any documentation that might be of assistance. Part of my problem is I am not sure where to look at this point. Thanks!
Create Form
<section data-ng-controller="AlbumsController">
<div class="page-header">
<h1>New Album</h1>
</div>
<form data-ng-submit="create()">
<section data-ng-include="'/modules/albums/views/form.html'"></section>
<input type="submit" class="btn btn-primary" value="Add Album">
</form>
</section>
Form Partial
<fieldset class="well">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="album.name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="name">Album Picture</label>
<div class="controls">
<input type="text" data-ng-model="album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="releaseDate">Release Date</label>
<div class="controls">
<input type="date" data-ng-model="album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="sku">SKU</label>
<div class="controls">
<input type="text" data-ng-model="album.sku" id="sku" class="form-control" placeholder="SKU" required>
</div>
</div>
</fieldset>
change: <section data-ng-include="'/modules/albums/views/form.html'"></section>
to: <section data-ng-include src="'/modules/albums/views/form.html'"></section>
As I see, you do it right. What you may left is you need to define $scope.album on the $scope before use it on child scope.
$scope.album = {}; // set it on your AlbumsController
I have the same problem with you, in my solution, I used parent scope to bind data at child view. Like this:
<fieldset class="well">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="name">Album Picture</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="releaseDate">Release Date</label>
<div class="controls">
<input type="date" data-ng-model="$parent.album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="sku">SKU</label>
<div class="controls">
<input type="text" data-ng-model="$parent.album.sku" id="sku" class="form-control" placeholder="SKU" required>
</div>
</div>
</fieldset>
It's ugly, but work's good for me.