I'm trying to integrate the shake effect in an AngularJS validation but I am failing to do so using animate.css. Here is my code:
<div class="form-group">
<input type="text" name="firstName" id="firstName"
ng-model="firstName"
ng-class="{'animate shake':submitted && myForm.firstName.$invalid }"
class="form-control" placeholder="First Name" value="" required/>
</div>
<div class="form-group">
<input type="text" name="lastName" id="lastName"
ng-model="lastName"
ng-class="{'animate shake':submitted && myForm.lastName.$invalid }"
class="form-control" placeholder="Last Name" required />
</div>
<div class="form-group">
<input type="email" name="input" id="emailId"
ng-model="email"
ng-class="{'animate shake':submitted && myForm.input.$invalid }"
class="form-control" placeholder="Email" required />
</div>
<button class="button primary" id="submit_form" type="submit"
ng-click="submitted = true">Submit</button>
What is wrong here?
Related
I really cant understand why it's not working, here is my html:
<form>
<h1 class="forms_container_title">Registration form: </h1>
<div class="form_items">
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="form_items">
<input type="text" name="surname" id="surname" placeholder="Enter your surname">
</div>
<div class="form_items">
<input type="email" name="emal" id="email" placeholder="Enter your email">
</div>
<div class="form_items">
<input type="password" name="pw" id="pw" placeholder="Enter password">
</div>
</form>
<div id="submit_form">
<button type="submit">Submit</button>
</div>
and this is simple javascprit, for example:
const fname = document.getElementById("name");
and I want to get its value with ".value", but it's only showing ".nodevalue" option, whyy ???
I have been working on the requirement there are multiple form-groups in my form when any one of the form-group is valid remaining all form-groups required attribute should be removed. why because in that form any one of the uer is enough.
<form id="inviteTeamForm">
<div class="form-group">
<div>
<input type="text" placeholder="First Name" name="firstName" id="firstName" class="form-control"/>
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" />
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type='email' name="email" id="email" placeholder="Company email" class="form-control email" size="10" />
<span class="CstErrMsg">Field is required</span>
</div>
</div>
<div class="form-group">
<div>
<input type="text" placeholder="First Name" name="firstName" id="firstName" class="form-control"/>
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" />
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type='email' name="email" id="email" placeholder="Company email" class="form-control email" size="10" />
<span class="CstErrMsg">Field is required</span>
</div>
</div>
<div class="form-group">
<div>
<input type="text" placeholder="First Name" name="firstName" id="firstName" class="form-control"/>
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" />
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type='email' name="email" id="email" placeholder="Company email" class="form-control email" size="10" />
<span class="CstErrMsg">Field is required</span>
</div>
</div>
<div class="form-group">
<div>
<input type="text" placeholder="First Name" name="firstName" id="firstName" class="form-control"/>
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" />
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type='email' name="email" id="email" placeholder="Company email" class="form-control email" size="10" />
<span class="CstErrMsg">Field is required</span>
</div>
</div>
<button type="submit" class="btn" id="inviteUser">Invite </button>
</form>
<script>
$("#inviteTeamForm").submit(function(){
var formElements = $("form-group").closet();
if(formElements.valid()){
formElements.next.find.required = false;
}
})
</script>
Thanks in advance.
$("#inviteUser").click(function() {
var sumVal = "";
$("#inviteTeamForm").find(".form-group").each(function() {
var $this = this;
$($this).find("input").each(function() {
sumVal += $(this).val();
if ($(this).val()) {
$($this).addClass("req-validate");
return false;
} else {
$($this).removeClass("req-validate");
}
});
$(".form-group.req-validate")
.find("input")
.attr("required", true);
$(".form-group")
.not(".req-validate")
.find("input")
.removeAttr("required");
});
if (!sumVal) {
console.log(sumVal)
$(".form-group")
.find("input")
.attr("required", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="inviteTeamForm">
<div class="form-group" id="group1">
<div class="required">
<input type="text" x-moz-errormessage="Enter firstName" placeholder="First Name" name="firstName" id="firstName" class="form-control" required/>
</div>
<div class="required">
<input type="text" x-moz-errormessage="Enter lastName" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" required/>
</div>
<div class="required">
<input type='email' x-moz-errormessage="Enter your company email" name="email" id="email" placeholder="Company email" class="form-control email" size="10" required/>
</div>
</div>
<div class="form-group" id="group2">
<div class="required">
<input type="text" x-moz-errormessage="Enter firstName" placeholder="First Name" name="firstName" id="firstName" class="form-control" required/>
</div>
<div class="required">
<input type="text" x-moz-errormessage="Enter lastName" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" required/>
</div>
<div class="required">
<input type='email' x-moz-errormessage="Enter your company email" name="email" id="email" placeholder="Company email" class="form-control email" value="" required/>
</div>
</div>
<div class="form-group" id="group3">
<div class="required">
<input type="text" x-moz-errormessage="Enter firstName" placeholder="First Name" name="firstName" id="firstName" class="form-control" required/>
</div>
<div class="required">
<input type="text" x-moz-errormessage="Enter lastName" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" required/>
</div>
<div class="required">
<input type='email' x-moz-errormessage="Enter your company email" name="email" id="email" placeholder="Company email" class="form-control email" size="10" value="" required/>
</div>
</div>
<div class="form-group" id="group4">
<div class="required">
<input type="text" x-moz-errormessage="Enter firstName" placeholder="First Name" name="firstName" id="firstName" class="form-control" required/>
</div>
<div class="required">
<input type="text" x-moz-errormessage="Enter lastName" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" required/>
</div>
<div class="required">
<input type='email' x-moz-errormessage="Enter your company email" name="email" id="email" placeholder="Company email" class="form-control email" size="10" value="" required/>
</div>
</div>
<button type="submit" class="btn" id="inviteUser">Invite </button>
</form>
This is what I'm currently using to trigger it
GET FREE QUOTE
then this is the html code
<div id="demo" class="collapse">
<br><br><br><br><br><br><br><br>
<div class="wrap-type-input">
<form id="get_free_quote" class="contact-form" method="post" action="contact/contact-process.php">
<div class="input-wrap name">
<input type="text" value="" tabindex="1" placeholder="Name (*)" name="name" id="name" required="">
</div>
<div class="input-wrap name">
<input type="text" min="0" value="" accept="*/phone" tabindex="1" placeholder="Phone (*)" name="phone" id="name" required="">
</div>
<div class="input-wrap email">
<input type="email" value="" tabindex="2" placeholder="Email (*)" name="email" id="email" required="">
</div>
<div class="textarea-wrap">
<textarea class="type-input" tabindex="3" placeholder="Items you Need" name="message" id="message-contact" required=""></textarea>
</div>
<div class="subscribe">
<button type="submit" id="submit" class="button" name="submit">Send Message</button>
</div>
</form>
</div>
</div>
I will really be grateful for an answer
I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.
HTML
<form role="form" class="ng-pristine ng-valid" name="registerForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" type="text"
autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}">
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}">
<div ng-show="registerForm.email.$dirty">Email Invalid</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/>
</fieldset>
</form>
Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.
Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"
Any guess what am I missing. Any module that i need to include ?
Here is Plunker
First, you need registerForm.email.$error.email to trigger the 'invalid email' alert.
Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.
One more thing, add 'novalidate' to the form element.
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
<div ng-show="registerForm.email.$error.email">Email Invalid</div>
</div>
You are missing a bunch of stuff. First of all, you need to have your fields associated with a model for them to be validated. Second, your syntax for accessing errors is incorrect.
Here is a working plunkr for what you are trying to do.
This is the relevant code:
<body ng-controller="MainCtrl">
<form role="form" name="registerForm" novalidate>
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\S+#\S+\.\S+$/i" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" />
</fieldset>
</form>
<div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div>
<div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div>
</body>
Well, I am not sure but I think you also have to use $error with $dirty like this:
<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>
Also, add novalidate to disable default browser validation like this:
<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>
I've recently been working on a website's user registration system and I just finished the front end, it is using parsleyjs to validate the values in the form.
The problem I have is when the form is submitted no values are passed, is there any reason for this happening?
Form Code
<form role="form" method="get" data-validate="parsley" id="register" action="register/2/">
<div class="form-group">
<label for="userFirstName">Frist Name</label>
<input type="text" class="form-control" id="userFirstName" placeholder="John" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="userLastName">Last Name</label>
<input type="text" class="form-control" id="userLastName" placeholder="Newman" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="NewJohn101" data-required="true" data-trigger="change" data-usernamecheck="true">
</div>
<div class="form-group">
<label for="userEmail">Email address</label>
<input type="email" class="form-control" id="userEmail" placeholder="Email" data-trigger="change" data-required="true" data-type="email">
</div>
<div class="form-group">
<label for="userPassword">Password</label>
<input type="password" class="form-control" id="userPassword" placeholder="Password" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="userPasswordRetype">Re-Type Password</label>
<input type="password" class="form-control" id="userPasswordRetype" placeholder="Re-Type Password" data-required="true" data-equalto="#userPassword" data-trigger="change">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Both POST and GET assign values to keys that are equivalent to the name attribute of your inputs. For example:
<input type="text" name="input1" value="test">
Will build the array
"test" => $_GET["input1"]
No name attribute. No array.