click the forgot button in form email field should be validate using jquery below my code is there if any mistake suggest me and go through login pages images
login pages
<form id="form1" name="form1" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label"for="email">Name (required, at least 2 characters)</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>" />
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<div class="field-wrap">
<label class="view-label"for="password">Password (required, at least 8 characters)</label>
<input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>" />
<span class="text-danger"><?php echo form_error('password'); ?></span>
<button type="button" id="btn-show-forgot" name="btn-show-forgot">Forgot ?</button>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
$('#btn-show-forgot').click(function () {
// $('#forgot-email').attr('value', null);
$('.form-div').removeClass("active");
$('#forgot-form').addClass("active");
currentActiveId = "forgot-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
jquery as shown in below if in case any mistake suggest me
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"
}
})
$('#btn-show-forgot').on('click', function() {
$("#form1").valid();
});
});
</script>
Your code is working for me, did you added JQuery Validate plugin library?
See follow (your code + script include):
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Did you omit follow library? -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="form1" name="form1">
<div class="field-wrap">
<label class="view-label"for="email">Name (required, at least 2 characters)</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="" />
<span class="text-danger"></span>
</div>
<div class="field-wrap">
<label class="view-label"for="password">Password (required, at least 8 characters)</label>
<input type="password" placeholder="Password" name="password" id="password" value="" />
<span class="text-danger"></span>
<button type="button" id="btn-show-forgot" name="btn-show-forgot">Forgot ?</button>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
</body>
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"
}
})
$('#btn-show-forgot').on('click', function() {
$("#form1").valid();
});
});
</script>
</html>
You have to include this for JQuery Validation:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
Try this code
HTML
<form id="form1" method="post" action="#">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<button type="submit">Submit</button>
</form>
jQuery
$(document).ready(function () {
$("#form1").validate({
rules: {
"name": {
required: true,
minlength: 2
},
"email": {
required: true,
email: true
}
},
messages: {
"name": {
required: "Please, enter a name"
},
"email": {
required: "Please, enter an email",
email: "Email is invalid"
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
Working demo - http://jsfiddle.net/amwmedia/sw87W/
Related
In our contact form, I'm trying to only allow submissions from email addresses from the United States, since we can only do business in that one country. How can I trigger the default error message when a form submit attempt is made, so that "invalid" message appears the same way it appears for the first name and last name fields?
In the code below, for the sake of example, I'm allowing only 'com', 'edu', 'gov', 'net', 'org'. The goal is to trigger a message whenever an email address other than those above is entered into the email field.
$(document).ready(function() {
$(function() {
$("#testform").submit(function() {
str = $('input[name=emailAddress]').val();
str = str.split('#').slice(0);
str = str[1].split('.').slice(0);
var allowedDomains = ['com', 'edu', 'gov', 'net', 'org'];
alert("str = " + str[1]);
if ($.inArray(str[1], allowedDomains) !== -1) {
alert(str + ' is allowed');
} else {
alert('not allowed');
event.preventDefault();
event.stopPropagation();
$('#emailAddress').addClass('invalid');
}
});
});
});
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/holder.min.js"></script>
<script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>
<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>
<div class="container">
<form action="" method="post" target="" class="needs-validation" role="form" id="testform">
<fieldset>
<div class="form-group">
<label for="firstName" class="col-form-label">Customer first name:
<input type="text" class="form-control" name="firstName" id="firstName" required aria-required="true">
</label>
</div>
<div class="form-group">
<label for="lastName" class="col-form-label">Customer last name:
<input type="text" class="form-control" name="lastName" id="lastName" required aria-required="true">
</label>
</div>
<div class="form-group">
<label for="emailAddress" class="col-form-label">Customer email address:
<input type="email" class="form-control" name="emailAddress" id="emailAddress" required placeholder="Enter valid email" aria-required="true">
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</fieldset>
</form>
</div>
click the forgot link email field should be validate using javascript,i have a done code any mistake please suggest me,below shown javascript code link may be conflict go through once and suggest me
<form id="form1" name="form1" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label">Email Address</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>"/>
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<!--<div id='errorDiv' class='col-xs-12 pull-right'> </div>-->
<div class="field-wrap">
<input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>"/>
<span class="text-danger"><?php echo form_error('password'); ?></span>
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>
</div>
<!--<div id='errorDivv' class='col-xs-12 pull-right'> </div>-->
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" value="ulogin" >Login</button>
<?php
if (isset($message)) {
echo $message;
}
?>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
javascript
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/testing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!-- Did you omit follow library? -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"
}
})
$('#btn-show-forgot').on('click', function() {
$("#form1").valid();
});
});
</script>
It should be:
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
email: "required"
},
messages: {
email: "Please specify your name"
},
submitHandler: function(form){
form.submit();
}
});//validate()
});
</script>
submitHandler is called when the form is validated successfully. So, here we are submitting the form once it has validated successfully.
So I am new to bootstrap and so far I've got everything working the way I want. I have created a contact form which uses the Modal Form and sends the email via PHP using the Mail function.
I have created a script to do the validation on the form. If the validation passes I want the email to be sent out.
Currently when the user submits the form that is blank the validation isn't working and the email is getting sent.
Please keep in mind I'm am new to working with bootstrap.
HTML
<div id="ContactUs" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
<p><b>XXXX</b><br>
Company Phone: XXXXX
</p>
</div>
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here.">
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here.">
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here.">
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
Script
$(document).ready(function()
{
$validator = $("#contactForm").validate({
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
name: {
required: true,
minlength: 2
},
subject: {
required: true,
minlength: 10
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
messages: {
name: {
required: '<span class="help-inline">Your name is required</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
subject: {
required: '<span class="help-inline">A Subject is required.
</span>',
minlength:jQuery.format('<span class="help-inline">10 characters</span>')
},
email: {
required: '<span class="help-inline">Email.</span>',
email: '<span class="help-inline">Ex : name#exemple.com</span>'
},
message: {
required: '<span class="help-block">Message</span>',
minlength: jQuery.format('<span class="help-block">10 chars</span>')
}
},
submitHandler: function(form)
{
$('form').submit(function() {
if ($validator.numberOfInvalids() > 0)
{
$('#submit').modal('hide');
} else
{
$('#submit').modal('show');
}
});
}
});
});
On each input field add 'required'. Simple way to ensure each field has data
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here." required />
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here." required />
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here." required />
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here." required /></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Did you already include jquery and validation library?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
pass your form to your button with attribute
<button type="submit" class="btn btn-primary" form="ContactUs">Submit</button>
you should put your form id inside that
I am having some problems here, I have simple bootstrap form for change password integrated to my design and I want to validate it with jQuery.
What I want is simple, check if both passwords are same, and if not, display some error message.
My HTML looks like:
<div class="container">
<div class="row vertical-center">
<br>
<div class="col-md-6 col-md-offset-3">
<br>
<form role="form" action="" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Meno (email)</label>
<input class="form-control" id="disabledInput" type="text" placeholder="my#email.com" disabled>
</div>
<div class="form-group">
<label for="text">Staré heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
</div>
<div class="form-group">
<label for="password">Nové heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše nové heslo" name="password">
</div>
<div class="form-group">
<label for="password_again">Again</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe znova vaše nové heslo" name="password_again">
</div>
<button type="submit" class="btn btn-default">Zmeniť heslo</button>
</form>
</div>
</div>
</div>
And I am trying to add something like:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>
Same script work perfect for me on my other code, so it looks i am blind or I don't know where I making a mistake!
Guys can somebody of you without watching to my code for days look at this and tell me what I am doing wrong?
THANKS!!
This worked for me:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<div class="form-group">
<label for="exampleInputEmail1">Meno (email)</label>
<input class="form-control" id="disabledInput" type="text" placeholder="my#email.com" disabled>
</div>
<div class="form-group">
<label for="text">Staré heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
</div>
<div class="form-group">
<label for="password">Nové heslo</label>
<input type="password" class="form-control" id="password" placeholder="Vložťe vaše nové heslo" name="password">
</div>
<div class="form-group">
<label for="password_again">Again</label>
<input type="password" class="form-control" id="password_again" placeholder="Vložťe znova vaše nové heslo" name="password_again">
</div>
<button type="submit" class="btn btn-default">Zmeniť heslo</button>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#myform").validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>
</body>
</html>
Unable to submit form using jquery with stripe.js plugin. I want to submit form after creating stripe token. Jquery validation is working good. It showing an error message in console "object is not a function" , i am able to create token.
<?php
if(count($_REQUEST)>4)
{
print_r($_REQUEST);
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
</head>
<body>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="http://jqueryvalidation.org/files/lib/jquery.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<!-- ///////////////////////////////////////////////////////////////////////////////// -->
<!-- CONTACT FORM -->
<div class="col-lg-6">
<h1>CONTACT</h1>
<h3 class="service_h3">Say Hello! Ask something?</h3>
<form class="cmxform" id="signupForm" method="post" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" type="text">
</p>
<fieldset>
<div class="cardform">
<span class="payment-errors"></span>
<div class="field">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="input card-number" value="4242424242424242">
</div>
<div class="field small">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="input card-cvc" value="424">
</div>
<div class="field medium">
<label>Expiration (MM/YYYY)</label>
<input type="text" class="input card-expiry-month" size="2" placeholder="MM" value="05">
<input type="text" class="input card-expiry-year" size="4" placeholder="YYYY" value="2018">
</div>
</div>
</fieldset>
<p>
<input class="btn" type="submit" name="submit" id="submit" value="Submit"/>
</p>
</fieldset>
</form>
</div>
</body>
</html>
<script>
Stripe.setPublishableKey("pk_test_q8JKhn0ydXmENnxCnJxxV7xC");
function stripeResponseHandler(status, response) {
var $form = $('#signupForm');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('#submit').prop('disabled', false);
} else {
// response contains id and card, which contains additional card details
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and submit
$form.get(0).submit();
}
};
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
}
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
}
},
submitHandler: function(form) {
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
return false; // submit from callback
}
});
});
</script>
#matthew-arkin helped me to fix this problem. Just remove the name and id attributes from the submit button.its conflicting with the default .submit() action
Use :
<input class="btn" type="submit" value="Submit"/>
Instead of :
<input class="btn" type="submit" name="submit" id="submit" value="Submit"/>