I have a HTML form with some form fields.
My Markup is something similar to this -
<form>
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
My question is, I want to keep second form field inactively (in this form it is `email field) till first form field is correctly fill out. Inactive mean user cannot type or paste any thing there.
Can anybody tell is this possible in jquery, if so tell me how?
Hope someone will guide me to correct path.
Thank you.
Add disabled attribute to email and enable/disable on name keyup
HTML
<form>
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
jQuery
$(function () {
$('input.name').keyup(function () {
if ($(this).val()) {
$('input.email').removeAttr('disabled');
} else {
$('input.email').attr('disabled', true);
}
});
});
Fiddle
http://jsfiddle.net/m2h5fc9b/
Related
I have the following form:
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" required>
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" required>
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
I built a little popup that says thanks for signing up that should come up after the user has entered his data. However at the moment I have the problem that it also comes up when the user clicks the register button without entering any data (meaning the request does not fire due to the required tags in the fields). How do I make the popup only come up when the form is actually submitted?
Jquery for the popup:
$(window).load(function() {
$(".form-button").click(function() {
$('.popup').show();
});
});
I think you might be looking for the .submit event.
Using your example
$('.register-form').submit(function(e){
e.preventDefault(); // Stop the form submitting
$('.popup').show(); // Show the popup
e.currentTarget.submit(); // Now submit it!
});
Simply define ids on your each input to validate if both fields have value in it or not. Do like this
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" id="text1">
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" id="text2">
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
$(window).load(function() {
$(".form-button").click(function() {
let input1 = $('#text1').val();
let input2 = $('#input2').val();
if(input1 && input2){
//make your http req and then after getting your response open your popup
$('.popup').show();
}
});
});
When I click to submit, some input fields are empty. So I want an alert box to display for entering the value to the empty input field. Screenshot image: prnt.sc/pjwf7a
HTML code:
<div class="contact-form" id="form-details">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Your Name" v-model="newName">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Your Email" v-model="newName">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Your Phone Number" v-model="newName">
</div>
<div class="form-group messagebox">
<textarea class="form-control" placeholder="Type your message..." v-model="newName"></textarea>
</div>
<div class="submit-btn">
<div class="form-group">
<input type="submit" class="btn btn_default" value="Free Online Course" v-on:click="addName">
</div>
</div>
</div>
Vue script:
var formalert = new Vue({
el: '#form-details',
data: {
newName:''
},
methods: {
addName() {
alert('Enter Your Name');
}
},
});
Please change this code:
input type="submit" class="btn btn_default" value="Free Online Course" v-on:click="addName"</br>
To:
input type="button" class="btn btn_default" value="Free Online Course" v-on:click="addName"
Hope it is useful for you :)
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 will try to explain my problem:
I have one form (I can make second, but i want to have one). And I want to validate the form Using HTML5 or by Jquery plugin for validation and the problem is:
One of the form-fields are for registred users and another one is for new users. So I need to detect valid form or focused? Because HTML5 wan to validate full form. How you are solving this problem? BTW: I'm using Bootstrap 3.
For Exp:
<div class="col-md-12 well">
<div class="col-md-6">
<form id="checkout-login" action="" method="post">
<h3>Existing User</h3>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="input-fancy" id="email" placeholder="E-mail" name="email" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="password">Heslo</label>
<input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
</div>
</div>
<div class="col-md-6">
<h3>New user</h3>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="input-fancy" id="name" placeholder="Name" name="name" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="surname">Surname</label>
<input type="text" class="input-fancy" id="surname" placeholder="Priezvisko" name="surname" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="input-fancy" id="email" placeholder="E-Mail" name="email" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="password">Heslo</label>
<input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
</div>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Pokračovať"></input>
</form>
</div>
JQuery, please help me with ** and you can ignore //
$(document).ready(function () {
$("form").submit(function (e) { e.preventDefault() });
if(**find valid form){
$("**then $(this) is valid --> send").submit(function (e) {
e.preventDefault();
$.ajax({
url: '',
data: //my custom,
success: function (data) {
//Show Thank you
},
cache: false
});
});
}else{
//Show alert please register or login
}
});
Thank you for any answer, advice or comment.
here is the validation plugin jquery validate demo, i used it with bootstrap. It has lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 locales.
Code is available on https://github.com/jzaefferer/jquery-validation
I'm using bootstrap 3 to build a contact form and I have the following problem: If submitted empty, the form submits to the same page. If i enter values in the boxes, it will redirect to the homepage. This problem only occurs if I'm using a name="something" attribute for the input boxes. Does anyone have any idea why? HTML is this:
<form class="form" method="post" action="http://localhost/contact">
<div class="form-group">
<label for="name">Nume</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Numele tau...">
</div>
<div class="form-group">
<label for="email">Adresa email</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Adresa email...">
</div>
<div class="form-group">
<label for="subject">Subiect</label>
<input type="text" name="subject" class="form-control" id="subject" placeholder="Subiectul mesajului...">
</div>
<div class="form-group">
<label for="message">Mesaj</label>
<textarea class="form-control" name="message" id="message" rows="5" placeholder="Mesajul tau aici..."></textarea>
</div>
<button type="submit" class="btn btn-default">Trimite mesajul!</button>
</form>
You need an action to actually submit the form. The form won't do anything until you add an action to process the form and email it.
<form class="form-horizontal" method="post" action="contactform.php">
I use a variation of this form, http://www.html-form-guide.com/email-form/php-form-to-email.html