I am looking at the example on this page: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_validate
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
<h2>Validation Example</h2>
<form ng-app=""
ng-controller="validateCtrl"
name="myForm"
novalidate>
<p>Username:<br>
<input type="text"
name="user"
ng-model="user"
required>
<span style="color:red"
ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">
Username is required.
</span>
</span>
</p>
<p>Email:<br>
<input type="email"
name="email"
ng-model="email"
required>
<span style="color:red"
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>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
function validateCtrl($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe#gmail.com';
}
</script>
</body>
</html>
What I don't understand is, there seems to be no validation code. I especially don't understand why the following line works:
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
But if I place a similar line to try pretend that the username is an email address, it ignores it. i.e. the following doesn't check that the user name is an email address:
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
<span ng-show="myForm.user.$error.email">Invalid email address.</span>
</span>
</p>
Can someone explain this better ?
thats because your email filed is type of email so it validates against email format.
and your username is just a text filed so angular will validate against just a text input not against a email
here's a simple demo
In your case,
email field is required and should be a email,
<input type="email" name="email" ng-model="email" required>
so angular will first check whether its empty if not it will check that the value is an email
But in
text field is just a text
so angular will check only for empty or not-empty of the textbox value
Related
i'am using https://www.jqueryscript.net/demo/image-puzzle-slider-captcha/ for a form, i need to make sure the fields are correct before it submits. Right now it just get stuck (the puzzle) if i press the button submit when the field{s} have not been filled.
If all the fields are ok, it submits fine.
<h2>Contact Form</h2>
<form id="contact-form" action="" method="post">
<input autocomplete="off" type="text" id="website" name="website"/>
<label class="name">
<input type="text" placeholder="Name:" data-constraints="#Required #JustLetters" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid name.</span>
</label>
<label class="email">
<input type="text" placeholder="E-mail:" data-constraints="#Required #Email" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid email.</span>
</label>
<label class="phone">
<input type="text" placeholder="Phone:" data-constraints="#Required #JustNumbers"/>
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid phone.</span>
</label>
<label class="message">
<textarea placeholder="Message:" data-constraints='#Required #Length(min=20,max=999999)'></textarea>
<span class="empty-message">*This field is required.</span>
<span class="error-message">*The message is too short.</span>
</label>
<br>
<script>
$('#captcha').sliderCaptcha({
repeatIcon: 'fa fa-redo',
onSuccess: function () {
//if form fields are OK submit.
document.getElementById('submit').click();
//if not ok, reset the slider.
}
});
</script>
https://www.jqueryscript.net/demo/image-puzzle-slider-captcha/disk/longbow.slidercaptcha.js
This file has a reset option but i don't know how to do it and do that in script above.
I could not display the error message while input field takes the invalid data using Angular.js. Here is my code:
<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
<div ng-class="{ 'myError': billdata.type.$touched && bill data.type.$invalid }">
<input type="number" class="form-control oditek-form" ng-model="type" name="type" step="1" min="0" placeholder="Add Type" ng-pattern="/^[0-9]+([,.][0-9]+)?$/">
</div>
<div class="help-block" ng-messages="billdata.type.$error" ng-if="billdata.type.$touched">
<p ng-message="pattern" style="color:#F00;">This field needs only number(e.g-0,1..9).</p>
</div>
</form>
Here I need to only give number as input. If user is entering anything rather than number it should display the error message. Here myError is showing the red color border on input field which is coming properly but the message is not coming which should display.
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="">
<form name="myForm">
For Text <input name="myName" ng-model="myName" ng-pattern="/^[a-zA-Z ]+$/" required>
<span style="color: red" ng-show="myForm.myName.$error.required">First Name is required.</span> <span style="color: red" ng-show="myForm.myName.$error.pattern">Any other symbol are not allow.</span>
<br />
For Number
<input type="number" class="textbox_usr" name="txtmobno" id="txtmobno" ng-model="txtmobno" ng-minlength="10" ng-maxlength="10" required /><br />
<span style="color:red" ng-show="myForm.txtmobno.$dirty && myForm.txtmobno.$invalid">
<span ng-show="myForm.txtmobno.$error.required || myForm.txtmobno.$error.number">Valid Mobile number is required</span>
<span ng-show="((myForm.txtmobno.$error.minlength || myForm.txtmobno.$error.maxlength) && myForm.txtmobno.$dirty) ">Mobile number should be 10 digits</span>
</span>
</form>
</div>
ng-messages div should be like following
<div ng-messages="billdata.type.$error" ng-show="billdata.type.$touched">
<div ng-message when="pattern">
<span>This field needs only number(e.g-0,1..9).</span>
</div>
</div>
I have couple of fields in my form & I want to enable submit button if anyone of them is filled, how I can do this? If I put required to both or anyone of them then it won't work as I want.
<input type="text" name="phone">
<span ng-show="form.addContactForm.phone.$touched && form.addContactForm.phone.$error.required">Phone number or email is required</span>
<input type="text" name="email">
<span ng-show="form.addContactForm.email.$touched && form.addContactForm.email.$error.required">Phone number or email is required</span>
<button type="submit" ng-disabled="form.addContactForm.$invalid || form.addContactForm.$submitted">Submit</button>
If phone or email is entered then other message should hide
You just add the conditions in
<input type="text" name="phone" ng-model="ctrl.phone">
<span ng-show="(form.addContactForm.phone.$touched || form.addContactForm.email.$touched) && !ctrl.phone && !ctrl.email">Phone number or email is required</span>
<input type="text" name="email" ng-model="ctrl.email">
<span ng-show="(form.addContactForm.phone.$touched || form.addContactForm.email.$touched) && !ctrl.phone && !ctrl.email">Phone number or email is required</span>
<button type="submit" ng-disabled="(!ctrl.phone && !ctrl.email) || form.addContactForm.$invalid || form.addContactForm.$submitted">Submit</button>
Edit: Add error message and condition
Simplest solution, if this form is all you have: Use ng-required and make the condition in each field dependent on the other field. I even added a ng-disabled so that, if a field is filled-in, the other becomes disabled. I did not include the error messages for clarity - use the <span>s you already have.
<div ng-app="app" ng-controller="Ctrl as c">
<form name="contactForm">
<input ng-model="c.phone" type="text" name="phone"
ng-required="!c.email" ng-disabled="c.email" />
<input ng-model="c.email" type="text" name="email"
ng-required="!c.phone" ng-disabled="c.phone" />
<button ng-disabled="contactForm.$invalid">Submit</button>
</form>
</div>
Relevant fiddle: https://jsfiddle.net/k0L7c7jh/
If the model becomes larger, solutions like this (i.e. validation rules directly on the UI) do not scale well. For this I like model validations and to that end I created and I am using in my work egkyron, a JS validation framework that binds well with Angular (as well as with others).
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" 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>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe#gmail.com';
});
</script>
</body>
</html>
I have one issue in my password field and user name field using Angular.js.I have a login page.Suppose user clicked on remember me option of browser after the login.These saved user name and password is displaying on my username field and password field.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">User Name :</span>
<div ng-class="{ 'myError': billdata.uname.$touched && billdata.uname.$invalid }">
<input type="text" name="uname" id="uname" class="form-control" placeholder="add user Name" ng-model="login_name" ng-minlength="6" ng-keypress="clearField('uname');" tabindex="6" >
</div>
</div>
<div class="help-block" ng-messages="billdata.uname.$error" ng-if="billdata.uname.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your user name should be 6.</p>
</div>
<div class="input-group bmargindiv1 col-md-12" ng-hide="showpass">
<span style="position:absolute; right:5px; margin-top:6px; top:0px;"><button class="btn btn-xs btn-success"ng-mousedown="hideShowPassword();" ng-mouseup="hideShowPassword();" ng-mouseleave="hidePassAfterLeave();" ><i class="fa fa-eye"></i></button></span>
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'myError': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="{{inputType}}" name="pass" id="passno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!##\$%\^&\*])(?=.{8,})/" ng-keypress="clearField('passno');" tabindex="7" >
</div>
The Login credentials used by user at the time of login is available where ever the username and password filed is found which i dont need.Here I need blank user name and password field even the user clicked remember me option of browser.Please help me to resolve this issue .
Try to add 2 hidden inputs to start of your form:
<form autocomplete="off">
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete"
name="PreventChromeAutocomplete" autocomplete="username" />
<input type="password" id="PreventChromePasswordAutocomplete"
name="PreventChromePasswordAutocomplete" autocomplete="password" />
</div>
<!-- Rest form -->
</form>
you can try this
<input type="password" autocomplete="off" />
try adding autocomplete="off" on your form also
<form autocomplete="off" ...></form>
Try using javascript as :
$('#passno').attr("autocomplete", "off");
or add (autocomplete="off") attribute in html input tag :
For more info, refer http://www.w3schools.com/tags/att_input_autocomplete.asp
Try same for username field as well. :)
I'm using $error.minlength in cell phone input but when I want to validate this input for enabling the button to send a form to the server, $error.minlenght value is null. It shows me nothing until I type something but I need to know before I type anything how to tell angular that my $error.minlength is false;
so I can use this in disable attribute and check the validation of the each input for whole form then Enable the button and send the form to the server.
<input required name="mobileNo" ng-minlength="11" minlength="11" maxlength="11" ng-class="{nessasery:signupForm.mobileNo.$invalid,blur:signupForm.mobileNo.$touched && signupForm.mobileNo.$invalid}" class="form-control" id="tel" type="text" ng-pattern="/^09[0-9]*$/" ng-model="account.mobileno" placeholder="cellphone"/>
<span class="msg text-danger" ng-show="signupForm.mobileNo.$touched">
<span ng-show="signupForm.mobileNo.$error.required">can't leave this field</span>
</span>
<span class="msg text-danger" ng-show="signupForm.mobileNo.$dirty">
<span class="msg text-danger" ng-show="signupForm.mobileNo.$error.minlength">Total Number Of Phone Number is 11</span>
<span class="msg text-danger" ng-show="signupForm.mobileNo.$error.pattern">Enter Valid Phone Number</span>
</span>
<button ng-disabled="(signupForm.mobileNo.$error.minlength)">Singup</button>
in angularJS when we need to Validate the form and Enable the button (singup button) , we have two options:
validate the each input of the form or just validate the form element itself.
like This:
[formname].$invalid
<form name="myForm" novalidate >
<input name="username" required/>
<input name="password" required />
<button type="submit" ng-disable="myForm.username.$invalid && myForm.password.$invalid">sinup<button/>
<form/>
<!-- it,s better to do this: -->
<button ng-disable="myForm.$invalid">