I have a form in with name, surname, email and date of birth
The mail is a "pre-compiled" field but in firefox (ONLY in firefox) I see the email also in the date of birth
This is the code:
<div class="col-sm-6">
<div class="form-group" data-ng-class="{'has-error': nameErrInvalid}">
<input type="text" class="form-control" data-ng-model="name" placeholder="{{langfile[lang]['name_user']}}" data-ng-required="true"/>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" data-ng-class="{'has-error': surnameErrInvalid}">
<input type="text" class="form-control" data-ng-model="surname" placeholder="{{langfile[lang]['surname_user']}}" data-ng-required="true"/>
</div>
</div>
<div class="col-sm-6"><!-- MAIL -->
<div class="form-group" data-ng-class="{'has-error': emailErrInvalid}"><!--placeholder="Email" data-ng-required="true"-->
<input type="email" class="form-control" data-ng-model="email" data-ng-disabled="emailDisabled"/>
</div>
</div>
<div class="col-sm-6"><!-- DATA -->
<div class="form-group" data-ng-class="{'has-error': dtErrInvalid}">
<input type="text" class="form-control" data-ng-model="date" placeholder="{{langfile[lang]['wizarddateholder']}}" data-ng-required="true"/>
</div>
</div>
firefox behaviour NOT OK
chrome behaviour OK
Related
So, I have a parent form with a nested set of ng-forms like this:
<form class="row" name="parentForm" ng-repeat="model in controller.addresses track by $index" novalidate>
<div class="col-xs-12 row-title">
<h1>{{ model.type || 'Delivery' }} address</h1>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4">
<div class="form" name="saveForm" ng-form>
<div class="form-group">
<label class="control-label">Company name</label>
<input class="form-control" name="company" type="text" placeholder="Enter your company name" ng-model="model.company" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.address1.$invalid && !saveForm.address1.$pristine }">
<label class="control-label">House name/number</label>
<input class="form-control" name="houseName" type="text" placeholder="Please enter your address 1" ng-model="model.houseName" ng-minlength="3" required />
</div>
<div class="form-group">
<label class="control-label">Street</label>
<input class="form-control" name="street" type="text" placeholder="Please enter your address 2" ng-model="model.street" />
</div>
<div class="form-group">
<label class="control-label">Town</label>
<input class="form-control" name="town" type="text" placeholder="Please enter your address 3" ng-model="model.town" />
</div>
<div class="form-group">
<label class="control-label">County</label>
<input class="form-control" name="county" type="text" placeholder="Please enter your address 4" ng-model="model.county" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.postCode.$invalid && !saveForm.postCode.$pristine }">
<label class="control-label">Post code</label>
<input class="form-control" name="postCode" type="text" placeholder="Enter your post code" ng-model="model.postCode" ng-minlength="3" required />
</div>
</div>
</div>
</form>
I then have a button:
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-4">
<div div class="row">
<div class="col-xs-6 tile">
<a class="red" ui-sref="^">
<i class="fa fa-trash"></i>
<div class="footer">Back</div>
</a>
</div>
<div class="col-xs-6 tile" ng-if="parentForm.$valid">
<a class="yellow" ui-sref="^.finance">
<i class="fa fa-arrow-right"></i>
<div class="footer">Continue</div>
</a>
</div>
</div>
</div>
</div>
I want this button to only show if all child forms are valid. I was hoping that I could just use parentForm.$valid but that doesn't work.
Does anyone know how to solve this?
Try to do parentForm.saveForm.$valid.
It will work
Nested forms aren't valid in HTML5 - but you can place your saveForm outside the parentForm and then use the input element's form attribute to specify a form for your input elements.
<form name="form1">
<input type="string" ng-model="form1input" required>
<input type="string" form="form2" ng-model="form2input" required>
</form>
<div ng-form="form2" id="form2"></div>
<button ng-if="form1.$valid && form2.$valid">Click</button>
Plunker: https://plnkr.co/edit/y9ipsNoEW596guLf2CzM?p=preview
Please refer my HTML form attached
var app = angular.module('main_app',['ngRoute',"angucomplete-alt","ngStorage",'ui-notification','ngSanitize'])
.factory('myService', function () {
return {
say: function ($scope) {
return "Hello World";
}
}
})
;
app.config(function(NotificationProvider) {
NotificationProvider.setOptions({
delay: 10000,
startTop: 20,
startRight: 10,
verticalSpacing: 20,
horizontalSpacing: 20,
positionX: 'right',
positionY: 'top'
});
});
app.controller('RegisterGuestController', function($scope,$routeParams,$http,$location,$rootScope,Notification){
$scope.book_id = $routeParams.id_book;
$scope.loginBlock = true;
$scope.lostPassword = false;
//console.log($scope.book_id);
$http({
url: base_url+"api_user/register_guest",
method: "GET",
params: {book_id: $scope.book_id}
}).success(function(data){
if(data.return_code==1){
$scope.bookDetails = data.data.bookDetails[0];
//alert ($scope.bookDetails.name);
$('#frm_name').focus();
} else {
Notification.error({message: data.data.message, title: 'Error'});
}
});
});
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script></head>
<body ng-cloak class="" ng-app="main_app" >
<div class="registration-page" ng-init="register_guest()" >
<form method="post" id="registrationForm" name="frmregisterGuest" novalidate >
<div class="row">
<div class="col-sm-6 ">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_name.$invalid && frmregisterGuest.frm_name.$touched}" >
<label for="txtfirstname">first_name</label>
<input type="text" name="frm_name" value="" id="frm_name" class="form-control" ng-blur="validate=true" ng-model="frm_name" title="Enter your first name." required ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_name.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_name.$error.minlength" class="help-block">Min length of first name is 2</div>
<div ng-show="frmregisterGuest.frm_name.$error.maxlength" class="help-block">Min length of first name is 20</div>
<div ng-show="frmregisterGuest.frm_name.$touched && frmregisterGuest.frm_name.$error.required" class="help-block">Please enter first name</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : frmregisterGuest.frm_middleName.$invalid && frmregisterGuest.frm_middleName.$touched}" >
<label for="txtmiddleName">middle name</label>
<input type="text" name="frm_middleName" id="frm_middleName" ng-blur="validate=true" ng-model="frm_middleName" class="form-control" title="Enter your middle name." ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_middleName.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_middleName.$error.minlength" class="help-block">Min length of middle name is 2</div>
<div ng-show="frmregisterGuest.frm_middleName.$error.maxlength" class="help-block">Max length of middle name is 20</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : frmregisterGuest.frm_lname.$invalid && frmregisterGuest.frm_lname.$touched}">
<label for="txtlastName">last name</label>
<input type="text" name="frm_lname" id="frm_lname" value="" class="form-control" ng-blur="validate=true" ng-model="frm_lname" title="Enter your last name." ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_lname.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_lname.$error.minlength" class="help-block">Min length of last name is 2</div>
<div ng-show="frmregisterGuest.frm_lname.$error.maxlength" class="help-block">Min length of last name is 20</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_email.$invalid && frmregisterGuest.frm_email.$touched}">
<label for="txtemail">email</label>
<input type="email" name="frm_email" id="frm_email" value="" class="form-control" title="Enter your email address." ng-blur="validate=true" ng-model="frm_email" required ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/">
<div ng-show="frmregisterGuest.frm_email.$touched && frmregisterGuest.frm_email.$error.required" class="help-block">Please enter eamil</div>
<div ng-show="frmregisterGuest.frm_email.$error.pattern" class="help-block">Please enter correct email</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_password.$invalid && frmregisterGuest.frm_password.$touched}" >
<label for="txtpassword">password</label>
<input type="password" name="frm_password" id="frm_password" value="" class="form-control" title="Enter your password ." ng-blur="validate=true" ng-model="frm_password" required ng-minlength="6" ng-maxlength="10" >
<div ng-show="frmregisterGuest.frm_password.$touched && frmregisterGuest.frm_password.$error.required" class="help-block">Please enter password</div>
<div ng-show="frmregisterGuest.frm_password.$error.minlength" class="help-block">Min length of password is 2</div>
<div ng-show="frmregisterGuest.frm_password.$error.maxlength" class="help-block">Max length of password is 20</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_password2.$invalid && frmregisterGuest.frm_password2.$touched}">
<label for="txtpassword2">confirm password</label>
<input type="password" name="frm_password2" id="frm_password2" class="form-control" title="Enter your confirm_password." ng-model="frm_password2" required>
<div ng-show="frmregisterGuest.frm_password2.$touched && frmregisterGuest.frm_password2.$error.required" class="help-block">Please enter confirm password</div>
<div ng-show="(!frmregisterGuest.frm_password2.$error.required) && frmregisterGuest.frm_password2.$touched && frmregisterGuest.frm_password2.$error.noMatch" class="help-block">password does not match</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<p class="lostpassword">
lost your password
or
already registered
</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="hidden" id="bookId" name="bookId" ng-value="{{bookDetails.id_book}}" value="{{bookDetails.id_book}}">
<input type="button" ng-click="doRegister()" id="register" name="register" value="Register" class="btn btn-primary" ng-disabled="frmregisterGuest.$invalid" >
</div>
</div>
</form>
</div></body></html>
I am setting focus to first field using following code in register_guest() JS function:
$('#frm_name').focus();
The form works fine When I am not using focus().
But by setting focus to first field, when I click the 'already registered' link, it displays 'required field error message' and does not redirect.
when I click second time on the same link, it redirects to required page.
I am using jquery version jquery-1.12.4 and AngularJS v1.4.1[enter image description here][1]
try to use attribute autofocus inside instead jquery focus()
I need to display all the messages at the top of the form and I need to implement the custom error for fields like email and phone number.
index.html
<form name="adminForm" ng-submit="addAdmin()" novalidate>
all error messages need to be displayed here
<div class="form-group" ng-class="{ 'has-error': adminForm.firstName.$touched && adminForm.firstName.$invalid }">
<label>First Name</label>
<input type="text" name="firstName" class="form-control" ng-model="admin.first_name" ng-maxlength="255" required>
<div class="help-block" ng-messages="adminForm.firstName.$error" ng-if="adminForm.firstName.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': adminForm.lastName.$touched && adminForm.lastName.$invalid }">
<label>Last Name</label>
<input type="text" name="lastName" class="form-control" ng-model="admin.last_name" ng-maxlength="255" required>
<div class="help-block" ng-messages="adminForm.lastName.$error" ng-if="adminForm.lastName.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': adminForm.email.$touched && adminForm.email.$invalid }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="admin.email" ng-maxlength="255" required>
<div class="help-block" ng-messages="adminForm.email.$error" ng-if="adminForm.email.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
messages.html
<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="email">This needs to be a valid email</p>
<p ng-message="pattern">This needs to be a valid number</p>
<p ng-message="equals">Password must be same</p>
I'm looking for any possible solution or a reference to other possible solutions.
Reason : I'm finding difficulty in implementing unit tests for this(noob), so i think a single error message can make it easy for testing.
Thanks!
I am developing an application where I am using bootstrap and angular together. Form validation using angular and bootstrap is working fine but I have a problem to reset the form. I call $setPristine() but it doesn't seem to be doing anything.
Here is my html.
<div class="cl-xs-12" style="margin-top:20px">
<div class="col-xs-3"></div>
<div ng-controller="AddUpdateUserController" class="col-xs-6">
<form class="form-horizontal" role="form" id="addEditMemberForm" name="addEditMemberForm" ng-submit="addUpdateMember(member)" novalidate>
<input type="hidden" id="mmeberId", name="memberId" ng-model="member.id">
<div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.firstName.$invalid && addEditMemberForm.firstName.$dirty}">
<label for="firstName" class="control-label col-xs-4">First Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" ng-model="member.firstName" ng-pattern="/^[0-9A-Za-z]+$/" required>
<div ng-show="addEditMemberForm.$submitted || addEditMemberForm.firstName.$touched" ng-messages="addEditMemberForm.firstName.$error">
<div ng-show="addEditMemberForm.firstName.$error.required" class="validationErrorMessage">First Name is required</div>
<div class="validationErrorMessage" ng-message="pattern">First name is invalid. Only Alphanumeric characters are allowed</div>
</div>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.middleName.$invalid && addEditMemberForm.middleName.$dirty}">
<label for="lastName" class="control-label col-xs-4">Middle Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="middleName" name="middleName" placeholder="Middle Name" ng-model="member.middleName" ng-pattern="/^[0-9A-Za-z]+$/" required>
<div ng-show="addEditMemberForm.$submitted || addEditMemberForm.middleName.$touched" ng-messages="addEditMemberForm.middleName.$error">
<div class="validationErrorMessage" ng-message="required">Middle name is required.</div>
<div class="validationErrorMessage" ng-message="pattern">Middle name is invalid. . Only Alphanumeric characters are allowed</div>
</div>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.lastName.$invalid && addEditMemberForm.lastName.$dirty}">
<label for="lastName" class="control-label col-xs-4">Last Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" ng-model="member.lastName" ng-pattern="/^[0-9A-Za-z]+$/" required>
<div ng-show="addEditMemberForm.$submitted || addEditMemberForm.lastName.$touched" ng-messages="addEditMemberForm.lastName.$error">
<div ng-show="addEditMemberForm.lastName.$error.required" class="validationErrorMessage">Last Name is required</div>
<div class="validationErrorMessage" ng-message="pattern">Last name is invalid. . Only Alphanumeric characters are allowed</div>
</div>
</div>
</div>
</form>
<div class="row">
<label>{{message}}</label>
</div>
<label ng-model="status"></label>
</div>
<div class="col-xs-3"></div>
</div>
Here is my Javascript:
angular.module('SiteControllerModule').controller('AddUpdateUserController', ['$scope', '$http', '$location', function($scope, $http, $location){
$scope.resetForm = function () {
$scope.member = null;
$scope.addEditMemberForm.$setPristine();
}
}]);
When $setPristine is called, my form is still dirty and looks like it left behind my Bootstrap validation Error.
Any help related to this is appreciated.
Thanks
Try this too:
$scope.addEditMemberForm.$setPristine();
$scope.addEditMemberForm.$setUntouched();
I am setting up a blog and have a contact form page (standard bootstrap blog template)
I have everything uploaded onto my host - hostgator, but I can't manage to get the contact form to send an email out properly.
I have tried both an external email account and an account on the same domain name with no luck.
Here is the original html source for the contact page from bootstrap: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/contact.html
and the original source for the contact_me.php: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/mail/contact_me.php
Is there a setting I need to change from the hostgator cpanel or something in the code I'm missing?
Edit: Here is my domain if you want to view the source I have in place:
www.decentralizeblog.com
I have made bit changes to the form
you have not used certain attributes in your form
link method, action and name attribute in text field
<form name="sentMessage" id="contactForm" action="mailer.php" method="post" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" name="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" name="phone" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" name="message" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
This may not be a problem with your code, have you checked that your hostgator plan supports the php mail() function? Some plans (I know from experience) have this disabled as an incentive for you to upgrade.
Hope this helps.