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>
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 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
For the below code I want the content of the submit button with the .btn-primary attribute to change to "Success!" only if the input fields are all not null.
At preset the code goes straight to success when the button is press whether or not the fields have content.
I thought it might be because the fields may somehow already have a value that is not null so I ran this code: alert($('#Comment').attr("value")); and it returned undefined in the alert message. Undefined is the same as null in js/jquery isn't it?
I got this code to work earlier and it was typed almost the same way with just a few changes. I undid the changes but it still does not work.
Any help will be appreciated. (If anyone knows this) Are there instances in which the same code could not work at a different time, all things being equal?
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
$(document).ready(function () {
var Fname = $('#FirstName').attr("value");
var Lname = $('#LastName').attr("value");
var Email = $('#Email').attr("value");
var Comment = $('#Comment').attr("value");
$(".btn-primary").click(function () //This block should say, if all fields are not null changed the content of button to "Success!" and change the content of <h1> to "THANKS, I'VE GOT YOUR MESSAGE."
{
if (Fname != null && Lname != null && Email != null && Comment != null)
{
$("button").html("Success!");
$("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
}
})
});
</script>
And this is the html on the same page
<form class="form-horizontal" role="form" action="/Home/Contact" method="post">
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName"/>
<span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email#Address.com"/>
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea>
<span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
<input type="reset" class="btn btn-default btn-sm active" value="reset">
</div>
</div>
</form>
When your document loads you are storing the value of Fname, Lname ..... so on. The issue is you then use these values in your conditional test but the values will not have changed as they are just the raw value from the first time the page loaded. One quick fix would be to bring these inside the click so on every click they can re evaluated
Also when checking you are only checking for null but these are not going to equal null anyway. Better would be to fully validate them or just test for generic truthy which excludes the falsy values such as null, undefined, empty string
$(document).ready(function () {
$(".btn-primary").click(function (e)
{
var Fname = $('#FirstName').val();
var Lname = $('#LastName').val();
var Email = $('#Email').val();
var Comment = $('#Comment').val();
//ADDED JUST TO STOP THE FORM SUBMITTING
e.preventDefault();
//very quick test but this could be a lot more detailed for true validation on each field
if (Fname && Lname && Email && Comment) {
$("button").html("Success!");
$("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>
<form class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName" />
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName" /> <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email#Address.com" /> <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea> <span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
<input type="reset" class="btn btn-default btn-sm active" value="reset">
</div>
</div>
</form>
I'm working on form validations in angularjs and so far i have completed 99%. But the issue is my form validation works correct only for first time submit only. it's confusing to explain but i'll try my best to explain :P .here it is. When i reset my form it is showing error messages that the fields are empty(As it should).like this
After that if i fill 2 fields and submit again i'll work correctly as it should.like this
Now my problem comes.If i reset my form (fields get cleared) and submit the form, only description field error is shown but not in other two.like this
My code
<form name="userForm" ng-submit="submitForm(userForm.$valid, user)" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && userForm.name.$dirty && submitted || (userForm.name.$invalid && userForm.name.$pristine) && submitted }">
<label>Name*</label>
<input type="text" name="name" class="item-input-wrapper" ng-model="user.name" required>
<label><p ng-show="submitted && userForm.name.$error.required" class="help-block "><font color="#009ACD">You name is required.</font></p></label>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && userForm.email.$dirty && submitted || userForm.email.$invalid && userForm.email.$pristine && submitted }">
<label>Email</label>
<input type="email" name="email" class="item-input-wrapper"ng-model="user.email" required >
<label><p ng-show="userForm.email.$invalid && userForm.email.$dirty && submitted || userForm.email.$invalid && userForm.email.$pristine && submitted" class="help-block"><font color="#009ACD">Enter a valid email.</font></p></label>
</div>
<!-- DESCRIPTION -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && userForm.username.$dirty && submitted || userForm.username.$invalid && userForm.username.$pristine && submitted }">
<label>Description</label>
<input type="text" name="username" class="item-input-wrapper" ng-model="user.username" ng-minlength="5" ng-maxlength="60" required>
<label><font color="white"><p ng-show="userForm.username.$error.minlength && submitted" class="help-block"><font color="#009ACD">Description is too short.</font></p></label>
<label><p ng-show="userForm.username.$error.maxlength && submitted" class="help-block"><font color="#009ACD">Description is too long.</font></p></label>
<label><p ng-show="submitted && userForm.username.$error.required" class="help-block "><font color="#009ACD">Description is required.</font></p></label>
</div>
<div class="col"style="text-align: center">
<button align="left"class="button button-block button-reset" type="reset" value="Reset" style="display: inline-block;width:100px;text-align:center "
ng-click="submitted=false" padding-top="true">Reset</button>
<button class="button button-block button-positive" style="display: inline-block;width:100px "
ng-click="submitted=true" type="submit" padding-top="true">Submit</button>
</div>
</form>
</div>
$setPristine(); may be useful for what you looking for. Try to add like this as shown below...
<button class="button" type="reset" ng-click="form.$setPristine()">Reset</button>
For further information and for working demo refer the below link
AngularJS does not proper handle button type="reset"?
you can also refer the below link for setting up the form to pristine state
Reset form to pristine state (AngularJS 1.0.x)
figured out the solution
inside your controller add this
$scope.reset = function() {
$scope.user = angular.copy($scope.orig);
$scope.userForm.$setPristine();
};
Here 'userForm' should be your form name and 'user' should be your model.
This works for me.try it.
<form name="forms.sample" novalidate>
<md-input-container class="md-block" flex-gt-sm>
<label>Name:</label>
<input ng-focus="focus=true" ng-blur="focus=false" style="width:400px;" class="form-control" name="Name" type="text" data-ng-model="Name" ng-pattern="SomePattern" required placeholder="enter the Name here" />
<div ng-messages for="forms.sample.Name.$error" ng-if="!focus">
<div ng-if='forms.sample.Name.$touched' ng-message="required">This is required.</div>
<div ng-if='forms.sample.Name.$touched' ng-message="pattern">Enter a valid domain name</div>
</div>
</md-input-container>
</form>