i am building a form using angular.js.
my form looks like:
<form name="registerForm" class="form-horizontal">
<div class="control-group">
<label class="control-label">שם פרטי</label>
<div class="controls">
<input type="text" ng-model="register.firstName" placeholder="שם פרטי" required>
</div>
</div>
<div class="control-group">
<label class="control-label">שם משפחה</label>
<div class="controls">
<input type="text" ng-model="register.username" placeholder="שם משפחה">
</div>
</div>
<div class="control-group">
<label class="control-label">דוא"ל</label>
<div class="controls">
<input type="email" ng-model="register.email" placeholder='דוא"ל'>
</div>
</div>
</form>
i am building a register form inside i will have 2 fields:
first name and last name that should be entered only with a specific language (not english).
explanation: no other language except that language will be accepted by the form.
all other fields will have to be in english.
thanks
This is a good question.
You can check the Unicode block for this language here, I guess it is Hebrew, so the code range is 0590-05FF.
Then you can use ngPattern to do the validation like this:
<input type="text" name="firstName" ng-model="register.firstName" placeholder="שם פרטי" required ng-pattern="pattern"></div>
function ctrl($scope) {
$scope.pattern = /[\u0590-\u05FF]+/g;
}
Here is the demo
I think Regex is the way to go.
HTML5 has the new pattern attribute that you could use to validate the user input, the only problem is that you also have to take care of browsers that do not support it, with Angular you can use the ngPattern directive.
This question will help you with the regex.
Remember that this is just the front-end validation and I recommend you to validate the user input in the back-end as well.
Related
Hi I want to get the valid or invalid state of all the forms outside the form tag i.e suppose if any of the form is not valid error message should be shown. myform.$invalid is not working for all forms and is not updating
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm">
<input type="text">
</form>
</div>
<div ng-if="myform.$invalid">Fill all fields</div>
It is better to have all the <input> elements on the same form:
<form name="myForm">
<div ng-repeat="a in [0,1,2,3,4]">
<input type="text" name="myInput{{a}}" ng-model="itemArr[$index]" required />
</div>
</form>
<div ng-show="myForm.$invalid">Fill all fields</div>
$scope.itemArr = [];
Also it is important that each <input> element has an ng-model directive.
For more information, see
AngularJS Developer Guide - Forms
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
I am having the same concern here, where I am creating multiple instance of form with same format (it's a table for multiple row input). I have been trying adding the $index to the form name but then I am facing issue to access the form_$index inside ng-messages and ng-click
example:
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm_{{ ::$index }}">
<input type="text">
</form>
</div>
<div ng-if="myform_{{ ::$index }}.$invalid">Fill all fields</div>
Wondering if anyone else can propose a solution for this use case.
I want to restrict the special characters and space in the input text field. I used the
ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/"
to restrict the special characters. but its not working. How can i achieve that?
here is my html code:
<form name="JobDescriptionForm" id="JobDescriptionForm" class="form-horizontal" role="form" novalidate>
<div class="col-md-12 col-sm-12 col-lg-12 nopadding select-job">
<label for="createJob" class="col-md-12 col-sm-12 col-lg-12 nopadding"> Create Job </label>
<input type="text" ng-model="price" name="price_field" ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" required>
<span ng-show="JobDescriptionForm.price_field.$error.pattern">Not a valid number!</span>
</div>
</form>
I' m referring this code because I'm little confused for is there any need to write something in Controller? What to do in this case?
Why don't you use ng-pattern="/^[a-zA-Z0-9]+$/" if all that you want is to restrict special characters and space?
And check your code as well, your end tag for "form" has a typo, you wrote "
I am looking for some guidance.
Here is some code I have:
<div ng-repeat="q in questions">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><span ng-bind="q.questionText"></span></h3>
</div>
<div class="panel-body">
<answer-field question="q"></answer-field>
</div>
</div>
</div>
answer-field is a directive, and essentially depending on what q is a certain type of form field will be displayed like a select box or an input text box, etc.
For example, the select box might be:
<div class='form-group'>
<select class='form-control' ng-model='question.answer' ng-options='item for item in question.choices' required>
<option value=''>Select an option...</option>
</select>
</div>
And the text field might be:
<div class='form-group'>
<input class='form-control' type='text' ng-model='question.answer' required />
</div>
As you can see, I have added required and this does technically work. The browser will show an error saying I need to fill out that field if I try to submit.
What I would like though is something a little more aesthetically pleasing. Bootstrap has has-error for example. It would be nice if instead of the default browser "fill out this field" message if I could make the form-group display has-error - and ideally display somewhere a list of the items that do indeed have an error.
How can I go about this?
Angular has novalidate. It suppresses the native HTML validation, allowing you to put in your own. As for how to show custom errors, it's also in that page.
I often like to display custom error messages as follows:
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" ng-model="user.password" placeholder="Password" required>
</div>
<div class="form-group has-error">
<p class="help-block" ng-show="form.password.$error.required && submitted">
Please enter password.
</p>
</div>
or you can use ng-class to append the has-error class to the first div based on the expression
I think I've misunderstood the use of groups in Parsley.js. What I had assumed is that groups could be used to not show an error on an individual input but on a group.
For instance, I have three sort code fields for a bank details form.. they're all required, but I don't want each one individually to get an error message (as they're inline), if any of them error, I want the group to get the error message and error class.
Is this possible without writing custom javascript to parse the form data manually?
You can't do that with data-parsley-group. Groups were created in order to validate a multi-step form. That is norrmally a large form that you split into steps (groups) and validate them one at a time.
What you can use, without adding custom javascript, is data-parsley-errors-container.
You should apply this attribute on every field where you want to group the error messages. You should use something like this:
data-parsley-errors-container="#element"
Where element is the id of the element where the messages will be displayed.
Here is an example on how you should create your form (jsfiddle available):
<form class="form-inline" role="form" id="myForm">
<div class="form-group col-xs-12">
<input type="text" class="form-control col-xs-3" id="field1" required
placeholder="Field 1" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field2" required
placeholder="Field 2" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field3" required
placeholder="Field 3" data-parsley-errors-container="#listFieldError" />
</div>
<div class="form-group">
<div id="listFieldError"></div>
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
I'm trying to match up passwords using Parsley.js but it doesn't seem to be working. Here is the code:
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-eye-close"></i></span>
<input type="password" id="password" name="password" placeholder="" class="input-xlarge" data-trigger="change" data-required="true" data-minlength="6">
</div>
<p class="help-block">Password should be at least 4 characters</p>
</div>
</div>
<!-- ************ NOT WORKING *************** -->
<div class="control-group">
<!-- Password -->
<label class="control-label" for="password_confirm">Password (Confirm)</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-eye-close"></i></span>
<input type="password" id="password_confirm" name="password_confirm" placeholder="" class="input-xlarge" data-equalto="#password" data-trigger="change focusout" data-required="true" >
</div>
<p class="help-block">Please confirm password</p>
</div>
</div>
This part data-equalto="#password" should do the check, but it doesn't seem to work.
I call the parsley validate in the form like so:
<form class="form-horizontal" id="userForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" data-focus="first" data-validate="parsley">
Been struggling with this for a few hours, found the answer courtesy of JoelCDoyle. I want to re-iterate it because though the question is dated, the answer provided by Joel works. Thanks! :)
<input type="password" name="pw" id="pw"
parsley-minlength="8"
parsley-required="true"
/>
<input id="pwtwo" type="password" name="pw-verify"
data-parsley-equalto="#pw"
parsley-required="true"
/>
this is the attribute you need to make the compare function work with parsley.js:
data-parsley-equalto="#pw"
I'm not sure if this will help you but I have a working solution here: http://codepen.io/anon/pen/KNyjoY
Basic installation
<form data-parsley-validate>
...
</form>
Javascript installation (I'm using this)
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I have added an event for #password to trigger #cpassword form validation.
$('#password').on('change input keyup', function() {
if (this.value) {
$('#cpassword').prop('required', true).parsley().validate();
} else {
$('#cpassword').prop('required', false).parsley().validate();
}
});
In the newest Parsley Version, you don't call the API by "data-" Attributes anymore. Not quite sure, if this is the case on your Version (i know data values worked in the past), but try it with the New API.
Therefore you call the form different with the property "parsley-validate" which is True if Set. And the Constraints are called with "parsley-[constraint]".
As stated on the official Parsley.js Site, its not quite W3C compatible, but for some weird Reason he likes it like that. However he also gives an Solution with defining a Namespace for Parsley to make it W3C compatible.
If you can Deliver the old Parsley version, I could have a look on that too.
Attention
This answer (and maybe question) is dated.
The answer may not be valid anymore, keep a look at the Comments on this answer.