I'm using Angularjs to submit the form then pass the value to my laravel function.
This is my HTML code
<form class="form-horizontal" method="post" name='form' novalidate ng-submit="submit()" ng-controller="syncApiCtrl">
<div class="col-lg-10">
<div class="input-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Your_name">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<input type="submit" name="sale" value="Sync Sale" class="btn btn-primary"></input>
<input type="submit" novalidate ng-click="sync_product(record)" name="product" value="Sync Product" class="btn btn-primary"></input>
</div>
</div>
</form>
This is my JS
$scope.submit = function () {
//$scope.form.$submitted = true;
// proceed if form valid
if ($scope.form.$valid) {
// is loading
$scope.loading = true;
// prepare data packet
var data = {};
angular.forEach($scope.form, function (v, k) {
if (k.indexOf('$') < 0 && typeof v.$dirty !== 'undefined' && v.$dirty) {
data[k] = v.$modelValue;
}
});
}
};
This is my laravel function
public function sync_sale() {
$name= preg_replace('/[^A-Za-z0-9\_]/', '', Input::get('name'));
Debugbar::info($name);
}
My laravel function always can't get the value after user submit a form.
You should have bound your input to a ng-model. This one is working. You should use data binding methods in angularJs.
<input type="text" class="form-control" id="name" name="name" placeholder="Your_name" ng-model="name">
Related
I have to show the validation after submit button in our form i don't understand what's the wrong in my code tell m anyone how to implemented using after submit?
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
// function to submit the form after all validation has occurred
$scope.submitDetail = false;
$scope.submitForm = function(isValid) {
$scope.submitDetail = true;
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)">
<div class="form-group">
<label>Name</label>
<input type="text" name="username" ng-model="user.username">
<p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
You name is required.
</p>
</div>
<button type="submit">Join now</button>
</form>
You need to add in your input a ng-required="true" and disable default form validation with novalidate like this:
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
// function to submit the form after all validation has occurred
$scope.submitDetail = false;
$scope.submitForm = function(isValid) {
$scope.submitDetail = true;
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="demoController" >
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="username" ng-model="user.username" ng-required="true">
<p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
You name is required.
</p>
</div>
<button type="submit">Join now</button>
</form>
</div>
I am using Parsley Remote validation with angularJS..using the async validator with add new user form is working fine, it uses the API and checks if the user name is already existed, and the email as well, if the user name is there it returns a 200 status, which is not equal to 404 and an error message appears.. BUT when submitting the form, if I check the form.isvalid status it returns true, it is only validating the NON remote options. I am stuck there.
here is the web form
<form class="form-horizontal form-label-left" method="post" id="AddUserForm"
data-ui-jq="parsley"
data-parsley-remote
data-parsley-priority-enabled="false"
novalidate="novalidate">
<fieldset>
<legend>
By default validation is started only after at least 3 characters have been input.
</legend>
<div class="form-group">
<label class="control-label col-sm-3" for="basic">User Name</label>
<div class="col-sm-9">
<input type="text" name="userName" class="form-control" data-ng-model="user.userName" value=""
data-parsley-remote
data-parsley-remote-validator='checkusername'
data-parsley-trigger="focusout"
data-parsley-remote-message="User name is already registerd in the system"
required="required" />
<span class="help-block">
Username must be unique
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="email">
E-mail
</label>
<div class="col-sm-9">
<input type="email" id="email" name="email" class="form-control" data-ng-model="user.email"
data-parsley-remote
data-parsley-remote-validator='checkemail'
data-parsley-trigger="focusout"
data-parsley-remote-message="Email is already registerd in the system"
required="required" />
<span class="help-block">
Email must be unique
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="password">
Password:
</label>
<div class="col-sm-9">
<input type="password" id="password" name="password" class="form-control mb-sm" data-ng-model="user.password"
data-parsley-trigger="change"
data-parsley-minlength="6"
required="required" />
<input type="password" id="password-r" name="password-r" class="form-control" placeholder="Confrim Password" data-ng-model="user.confirmPassword"
data-parsley-trigger="change"
data-parsley-minlength="6"
data-parsley-equalto="#password"
required="required" />
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" data-ng-click="AddNewUser($event)" class="btn btn-danger btn-rounded pull-right">Validate & Submit</button>
<button type="button" class="btn btn-default btn-rounded">Cancel</button>
</div>
</form>
and this is my async validator:
window.ParsleyExtend = {
asyncValidators: {
checkusername: {
fn: function (xhr) {
console.log($('[name="userName"]'));
return 404 === xhr.status;
},
url: authService.serviceBase + 'api/account/CheckUserName/' //+ $('[name="userName"]').text()
},
checkemail: {
fn: function (xhr) {
console.log($('[name="email"]'));
return 404 === xhr.status;
},
url: authService.serviceBase + 'api/account/CheckEmail/'// + $('[name="email"]').text()
}
}
};
and this is how I validate the form:
$scope.AddNewUser = function ($event) {
$event.preventDefault();
//THis resturns true allways when the remote validation is not valid,, but when other non remote valdiation happens is works fine
$('#AddUserForm').parsley().validate();
//and this if statement resturns true allways even when the remote validation is not valid,, but when other non remote valdiation happens is works fine
if ($('#AddUserForm').parsley().isValid()) {
authService.saveRegistration($scope.user).then(function (response) {
$scope.savedSuccessfully = true;
// $scope.message = "User has been registered successfully, you will be redicted to login page in 2 seconds.";
//startTimer();
},
function (response) {
var errors = [];
for (var key in response.data.modelState) {
for (var i = 0; i < response.data.modelState[key].length; i++) {
errors.push(response.data.modelState[key][i]);
}
}
$scope.message = "Failed to register user due to:" + errors.join(' ');
});
}
};
just found the answer.. I have to use asyncIsValid() and asyncValidate() along with the normal isValid() and Validate() methods.. so the code will be as follows:
$('#AddUserForm').parsley().asyncValidate();
if($('#AddUserForm').parsley().isValid() && $('#AddUserForm').parsley().isAsyncValid()) {
....}
I first check each field to make sure it is validated, if a field is not validated, my ok variable will be set to false.
Here is some sample code:
$(function() {
var ok;
$('#signup').parsley().on('field:validated', function() {
ok = $('.parsley-error').length === 0;
})
.on('form:submit', function() {
if (ok) return true;
else return false;
});
});
Parsley.addAsyncValidator('checkExists', function(xhr) {
return false === xhr.responseJSON;
}, '/data-management/verify-data?filter=signup');
Why the name and password are undefined?
I've used ng-model on them...
<form class="login" name="form">
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="name">Name: </label>
<input type="text" ng-model="name" id="name" class="form-control" placeholder="Nitzan">
</div>
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="password">Password: </label>
<input type="password" ng-model="password" id="password" class="form-control" placeholder="1234">
<p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
</div>
<button type="submit" class="btn btn-block btn-lg btn-success login-btn" ng-click="login()">Login</button>
</form>
In the controller:
$scope.login = function () {
usersService.get($scope.name, $scope.password).then(function success(result){
$scope.currentUser = result;
}, function error() {
$scope.isInvalidLogin = true;
});
};
See the plunker:
http://plnkr.co/edit/QD3vtil3w9pd4d1TGl9v?p=preview
Your problem is because of ng-if directive which is creating child scope from current scope. Hence $scope.name & $scope.password is undefined inside $scope.login function.
I'd suggest you do create one object for user which is initially blank like user={} or you can do this on html using ng-init, then put it inside of mainController so that it can directly access by the parent without doing $parent. notation.
And place name and password inside user object.
HTML
<div ng-init="user={}">
<div class="container login-div" ng-if="!currentUser">
<form class="login" name="form" ng-submit="login()">
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="name">Name:</label>
<input type="text" ng-model="user.name" id="name" class="form-control" placeholder="Nitzan">
</div>
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="password">Password:</label>
<input type="password" name="test" ng-model="user.password" id="password" class="form-control" placeholder="1234">
<p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
</div>
<button type="submit" class="btn btn-block btn-lg btn-success login-btn">Login</button>
</form>
</div>
</div>
CODE
$scope.login = function () {
alert("Name "+ $scope.user.name +"& password is " +$scope.user.password)
//usersService.get($scope.name, $scope.password).then(function success(result){
// $scope.currentUser = result;
//}, function error() {
// $scope.isInvalidLogin = true;
//});
};
Working Plunkr here.
Update
Otherwise you need to add change your ng-model to refer this scope to parent scope like
HTML
For name ng-model="$parent.name"
For password ng-model="$parent.password"
CODE
$scope.login = function () {
alert("Name "+ $scope.name +"& password is " +$scope.password)
//usersService.get($scope.name, $scope.password).then(function success(result){
// $scope.currentUser = result;
//}, function error() {
// $scope.isInvalidLogin = true;
//});
};
Plunkr Here
Hope this could help you. Thanks.
Template for form submission. This page will display the form template. Initially it shows the TItle,Full Name. On clicking the 'Add Tags' link new input fields is been generated for entering tags.
On submit, the field input(story.tag) is not been included on RequestPayload
<form novalidate ng-submit="save()">
<div>
<label for="title">Title</label>
<input type="text" ng-model="story.title" id="title" required/>
</div>
<div>
<label for="firstName">Full Name</label>
<input type="text" ng-model="story.fullname" id="fullname" required/>
</div>
<div ng-controller="Note" >
<div ng-repeat="story in items ">
<label>Tag {{$index+1}}:</label>
<input type="text" ng-model="story.tag" id="tag" required/>
</div>
<a ng-click="add()">Add Tags</a>
</div>
<button id="save" class="btn btn-primary">Submit Story</button>
</form>
script :- app.js
angular.module("getbookmarks", ["ngResource"])
.factory('Story', function ($resource) {
var Story = $resource('/api/v1/stories/:storyId', {storyId: '#id'});
Story.prototype.isNew = function(){
return (typeof(this.id) === 'undefined');
}
return Story;
})
.controller("StoryCreateController", StoryCreateController);
function StoryCreateController($scope, Story) {
$scope.story = new Story();
$scope.save = function () {
$scope.story.$save(function (story, headers) {
toastr.success("Submitted New Story");
});
};
}
//add dynamic forms
var Note = function($scope){
$scope.items = [];
$scope.add = function () {
$scope.items.push({
inlineChecked: false,
tag: "",
questionPlaceholder: "foo",
text: ""
});
};
}
The story object inside ng-repeat is in another scope. This JSFiddle should do what you are looking for.
<div ng-app>
<div ng-controller="NoteCtrl">
<form novalidate ng-submit="save()">
<div>
<label for="title">Title</label>
<input type="text" ng-model="story.title" id="title" required/>
</div>
<div>
<label for="firstName">Full Name</label>
<input type="text" ng-model="story.fullname" id="fullname" required/>
</div>
<div ng-repeat="story in items">
<label>Tag {{$index+1}}:</label>
<input type="text" ng-model="story.tag" required/>
</div> <a ng-click="add()">Add Tags</a>
<button id="save" class="btn btn-primary">Submit Story</button>
</form>
<div ng-repeat="test in items">
<label>Tag {{$index+1}}: {{test.tag}}</label>
</div>
</div>
</div>
The NoteController:
function NoteCtrl($scope) {
$scope.story = {};
$scope.items = [];
$scope.story.tag = $scope.items;
$scope.add = function () {
$scope.items.push({
inlineChecked: false,
tag: "",
questionPlaceholder: "foo",
text: ""
});
console.log($scope.story);
};
}
I have form fields that are validated using required. The problem is, that the error is displayed immediately when the form is rendered. I want it only to be displayed after the user actually typed in the text field, or on submit.
How can I implement this?
Use $dirty flag to show the error only after user interacted with the input:
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="form.email.$dirty && form.email.$error.required">Email is required</span>
</div>
If you want to trigger the errors only after the user has submitted the form than you may use a separate flag variable as in:
<form ng-submit="submit()" name="form" ng-controller="MyCtrl">
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="(form.email.$dirty || submitted) && form.email.$error.required">
Email is required
</span>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
function MyCtrl($scope){
$scope.submit = function(){
// Set the 'submitted' flag to true
$scope.submitted = true;
// Send the form to server
// $http.post ...
}
};
Then, if all that JS inside ng-showexpression looks too much for you, you can abstract it into a separate method:
function MyCtrl($scope){
$scope.submit = function(){
// Set the 'submitted' flag to true
$scope.submitted = true;
// Send the form to server
// $http.post ...
}
$scope.hasError = function(field, validation){
if(validation){
return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) || ($scope.submitted && $scope.form[field].$error[validation]);
}
return ($scope.form[field].$dirty && $scope.form[field].$invalid) || ($scope.submitted && $scope.form[field].$invalid);
};
};
<form ng-submit="submit()" name="form">
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="hasError('email', 'required')">required</span>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
If you want to show error messages on form submission, you can use condition form.$submitted to check if an attempt was made to submit the form. Check following example.
<form name="myForm" novalidate ng-submit="myForm.$valid && createUser()">
<input type="text" name="name" ng-model="user.name" placeholder="Enter name of user" required>
<div ng-messages="myForm.name.$error" ng-if="myForm.$submitted">
<div ng-message="required">Please enter user name.</div>
</div>
<input type="text" name="address" ng-model="user.address" placeholder="Enter Address" required ng-maxlength="30">
<div ng-messages="myForm.name.$error" ng-if="myForm.$submitted">
<div ng-message="required">Please enter user address.</div>
<div ng-message="maxlength">Should be less than 30 chars</div>
</div>
<button type="submit">
Create user
</button>
</form>
You can use angularjs form state form.$submitted.
Initially form.$submitted value will be false and will became true after successful form submit.
Erik Aigner,
Please use $dirty(The field has been modified) and $invalid (The field content is not valid).
Please check below examples for angular form validation
1)
Validation example HTML for user enter inputs:
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
</form>
2)
Validation example HTML/Js for user submits :
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate form-submit-validation="">
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit">
</p>
</form>
Custom Directive :
app.directive('formSubmitValidation', function () {
return {
require: 'form',
compile: function (tElem, tAttr) {
tElem.data('augmented', true);
return function (scope, elem, attr, form) {
elem.on('submit', function ($event) {
scope.$broadcast('form:submit', form);
if (!form.$valid) {
$event.preventDefault();
}
scope.$apply(function () {
scope.submitted = true;
});
});
}
}
};
})
3)
you don't want use directive use ng-change function like below
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate ng-change="submitFun()">
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit">
</p>
</form>
Controller SubmitFun() JS:
var app = angular.module('example', []);
app.controller('exampleCntl', function($scope) {
$scope.submitFun = function($event) {
$scope.submitted = true;
if (!$scope.myForm.$valid)
{
$event.preventDefault();
}
}
});
Invoking of validation on form element could be handled by triggering change event on this element:
a) exemple: trigger change on separated element in form
$scope.formName.elementName.$$element.change();
b) exemple: trigger change event for each of form elements for example on ng-submit, ng-click, ng-blur ...
vm.triggerChangeForFormElements = function() {
// trigger change event for each of form elements
angular.forEach($scope.formName, function (element, name) {
if (!name.startsWith('$')) {
element.$$element.change();
}
});
};
c) and one more way for that
var handdleChange = function(form){
var formFields = angular.element(form)[0].$$controls;
angular.forEach(formFields, function(field){
field.$$element.change();
});
};