jQuery to trigger HTML5 form validation - javascript

I have the following HTML code of the form:
<form id="login_information_form" class="form uniformForm validateForm">
<div class="field-group">
<label for="email">Email:</label>
<div class="field">
<input type="text" class="validate[required,custom[email]" size="32" id="email" name="email" value="">
</div>
</div>
<div class="field-group">
<label for="oldpass">Old Password:</label>
<div class="field">
<input type="password" class="validate[required]" size="32" id="oldpass" name="oldpass" value="">
</div>
</div> <!-- .field-group -->
<div class="field-group">
<label for="newpass">New Password:</label>
<div class="field">
<input type="password" class="validate[required]" size="32" id="newpass" name="newpass">
</div>
</div> <!-- .field-group -->
<div class="field-group">
<label for="newpassr">Repeat New Password</label>
<div class="field">
<input type="password" class="validate[required]" size="32" id="newpassr" name="newpassr">
</div>
</div> <!-- .field-group -->
<div class="actions">
<button class="btn btn-blue" id="save_login_info" type="submit">Save Password</button>
</div> <!-- .actions -->
</form>
Currently HTML5 triggers validation once the input looses its focus.
Is it possible to trigger validation with jQuery for this form when I click on Save Password button ?
EDIT:
My question was wrong. Can I trigger a prompt bubble for specific input field. For example: New password and Repeat new password is not correct. So I want to show a bubble on those input fields displaying the Error message

Related

Input field filled with value green correct sign appears but form not submitted

I want to submit form but form submit button does not work,
Please Guide me. I want to submit my form using javascript. Form validation is working fine but I am unable to submit my form. I am new user. If any one help me to submit this form.
I have a code:
});
<link href="https://jqueryvalidation.org/files/demo/site-demos.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="page-content">
<div class="form-v4-content">
<form class="form-detail" action="abc.html" method="post" id="myform">
<h2>REGISTER FORM</h2>
<div class="form-group">
<div class="form-row form-row-1">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" class="input-text">
</div>
<div class="form-row form-row-1">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name" class="input-text">
</div>
</div>
<div class="form-row">
<label for="your_email">Your Email</label>
<input type="text" name="your_email" id="your_email" class="input-text" required pattern="[^#]+#[^#]+.[a-zA-Z]{2,6}">
</div>
<div class="form-group">
<div class="form-row form-row-1 ">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="input-text" required>
</div>
<div class="form-row form-row-1">
<label for="comfirm-password">Comfirm Password</label>
<input type="password" name="comfirm_password" id="comfirm_password" class="input-text" required>
</div>
</div>
<div class="form-checkbox">
<label class="container"><p>I agree to the Terms and Conditions</p>
<input type="checkbox" name="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="form-row-last">
<input type="submit" name="register" class="register" value="Register">
</div>
</form>
</div>
</div>
I just want to submit my form. I don't know what is the problem
The form doesn't submit because you told it not to.
jQuery.validator.setDefaults({
debug: true,
From the docs:
debug (default: false)
Type: Boolean
Enables debug mode. If true, the form is not submitted...

My Contact form submit button not working

I'm trying send email from contact form by fetching data from another page ( Home Page - Index.php). But my contact didn't perform action which redirect the another page.
When I click On submit Button It didn't work.
<form method="post" id="form" class="contact-form" action="/contact.php">
<input type="hidden" name="_method" value="search">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
<span class="alert-error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="email" name="email" placeholder="Email*" type="email" required>
<span class="alert-error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="contact" name="contact" minlength="10" maxlength="10" placeholder="Contact Number*" type="text" required>
<span class="alert-error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="contact" name="subject" placeholder="Subject*" type="text" required>
<span class="alert-error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group comments">
<textarea class="form-control" id="comments" name="message" placeholder="Tell Us About Your Project *" required></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" name="submit" id="submit">
Send Message <i class="fa fa-paper-plane"></i>
</button>
</div>
<!-- Alert Message -->
<!-- <div class="col-md-12">
<div id="message" class="alert-msg"></div>
</div> -->
</div>
</form>
Please help me out.
Most Probably you have error in contact.php. try to switch on error_reporting, just add these lines at the top of contact.php file:
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

How to submit values of a php form and a javascript pop up?

I have created a PHP page which have some form information and at the end of the form i have a submit button. I know how to take all the user inputs from the form using the PHP post method. My problem is the following, how can i create a mini pop up form which will pop up after the user clicks the submit button. The pop up form will ask from the user if the submission of the information is urgent or not, the user will just choose between urgent or not urgent and click a button in the mini pop up form("proceed") that will close the pop up and send all information of the user inputs along with the pop up in a different PHP page. Can someone please guide with this problem?
The source code of my form at the moment is the following
<?php include "includes/tasksheader.php"; ?>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main1">
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Social Ensuarance Number</label>
<input type="text" class="form-control" id="" placeholder="Ensuarance Number">
</div>
<div class="form-group">
<label for="exampleInputEmail">Land Regisrty Department</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
</div>
<div class="form-group">
<label for="telephone">Income Tax Office</label>
<input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
</div>
<div class="form-group">
<label for="telephone">Court</label>
<input type="tel" class="form-control" id="telephone" placeholder="Court">
</div>
<div class="form-group">
<label for="telephone">Limassol District Administration</label>
<input type="tel" class="form-control" id="telephone" placeholder="District Administration">
</div>
<div class="form-group">
<label for="telephone">Municipality</label>
<input type="tel" class="form-control" id="telephone" placeholder="Municipality">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputUsername">VAT Department</label>
<input type="text" class="form-control" id="" placeholder="VAT">
</div>
<div class="form-group">
<label for="exampleInputEmail">RCB Bank</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
</div>
<div class="form-group">
<label for="telephone">Hellenic Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
</div>
<div class="form-group">
<label for="telephone">Bank of Cyprus</label>
<input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
</div>
<div class="form-group">
<label for="telephone">CDB Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
</div>
<div class="form-group">
<label for="telephone">Other</label>
<input type="tel" class="form-control" id="telephone" placeholder="Other">
</div>
</div>
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
<div>
<button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
Thanks in regards
I'm guessing you'll need to do the following:
first create the popup form(having two buttons...) then you'll need to write the following in your javascript file:
$('form').on("submit", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
or
$('button').on("click", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
then in your popup you'll again need to preventDefault and do whatever is on your intention.
I hope it helps:)
You could change the button to a submit button and set an onsubmit for the form:
<button type="submit">
<form method="post" onsubmit="openPopup();return false">
And then use javascript to open the popup with all the data you need.
I hope this helps.

_self is not working with a href

I am making a login form with a link if the user forgot password,
this form is inside div as below, but the problem is that when the user click Forgot the password, it opens this page in the whole page not on its div
<div>
<form class="form" method="POST" id="login-nav">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" class="form-control" id="emailaddress" name="emailaddress"placeholder="Email address" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" required>
<div class="help-block text-right">Forgot the password ?</div>
</div>
<div class="form-group">
<button type="submit" id="login_button" name="login_button" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
forgotpassword.php
<form action="" method="post">
<div class="form-group">
<label for="emailaddress">Enter your email address</label>
<input type="email" class="form-control" id="recovery_email" name="recovery_email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<button type="submit" id="resetpassword" name="resetpassword" class="btn btn-primary btn-block">Reset Password</button>
</div>
_self is standard for the target-tag. It opens the link in the same browser window, just what you are describing.
DIVs are not iFrames. (And no one wants iFrames for something like this. Really.)
You have to build your div-structure again at your forgotpassword.php.

Multiple required fields in angular JS

I have a new profile form that has multiple required fields, email, password and confirm password. The submit button is set to be disabled if the form is in invalid state. I believe that form should remain in invalid state until user has filled in all the required fields. To my surprise, angular checks my first field only. If it is alone in valid state, submit button gets activated, regardless of states of other fields. I am using angular 1.0.7. What is the reason behind this behavior ?
<form name='newProfileForm' ng-submit="formSubmit(newProfileForm.$valid)" novalidate>
<fieldset>
<legend>Login Information</legend>
</fieldset>
<!-- NAME -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.mail" required>
<p ng-show="newProfileForm.email.$invalid && newProfileForm.email.$dirty">Please enter valid email.</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="pass" required/>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" required/>
</div>
<fieldset>
<legend>Personal Details</legend>
</fieldset>
<div class="form-group">
<label>Title</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Address</label>
<textarea rows="3"></textarea>
</div>
<div class="form-group">
<label>Country</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>State</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>City</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>Pin Code</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Gender</label>
<select class="span3">
<option label="Male" value="Male"/>
<option label="Female" value="Female"/>
</select>
</div>
<div class="form-group">
<label>Field of Interest</label>
<input type="text" class="form-control"/>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary" ng-disabled="newProfileForm.$invalid">Submit</button>
</form>
You forgot to give ng-model to your password and confirm password field. Do it like
<input type="password" class="form-control" name="pass" ng-model="pass" required/>
<input type="password" class="form-control" name="confirmpass" ng-model="confirmpass" required/>

Categories