We Keep Coding

Form fields are not getting blank/reset when we click outside of the form

When we write something in the input field and then dont want to submit the form we click outside the form box but the form fields are not getting blank. I want them to get reset to the blank fields when open the form without refreshing the webpage.
Ps: The form is a popup form
Code for the form:
$(function(){
$("#schedule-demo").validate({
rules: {
firstname: 'required',
lastname: 'required',
email: {
required: true,
email: true,
},
phone : { required: true, minlength: 7 }
},
submitHandler: function(form, event) {
submitInformationForm(form);
event.preventDefault();
return false;
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form id="schedule-demo" hubspot-form-id="5bd0f54b-4329-40dd-973e-f1fedce07775">
<p>Please provide us your contact information and the expert will reach out shortly.</p>
<div class="form-group">
<label for="demo-first-name">First Name *</label>
<input type="text" name="firstname" class="form-control" id="demo-first-name">
</div>
<div class="form-group">
<label for="demo-last-name">Last Name *</label>
<input type="text" name="lastname" class="form-control" id="demo-last-name">
</div>
<div class="form-group">
<label for="demo-email">Work Email *</label>
<input type="email" name="email" class="form-control" id="demo-email">
</div>
<div class="form-group">
<label for="demo-phone">Phone Number *</label>
<input type="text" name="phone" class="form-control" id="demo-phone">
</div>
<div class="button-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
</div>
</form>

You can create a js function that u can call with a button for example, and this resets all form inputs.
<button class="button" type="button" onclick="Reset();">Reset</button>
function Reset() {
document.getElementById("schedule-demo").reset();
}

"... we click outside the form box but the form fields are not getting blank."
If you want to clear out the form when you click outside the form box, you could write an event handler that resets the form when you click outside of it.
$(document).on('click', function(e) {
var container = $('#schedule-demo');
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(container).validate().resetForm();
$(container).get(0).reset();
};
});
The .resetForm() is provided by the jQuery Validate plugin to reset all validation. The .get(0).reset() will clear out the form's contents.
$(function() {
$("#schedule-demo").validate({
rules: {
firstname: 'required',
lastname: 'required',
email: {
required: true,
email: true,
},
phone: {
required: true,
minlength: 7
}
},
submitHandler: function(form) {
// submitInformationForm(form); // commented out for demo
return false;
}
});
$(document).on('click', function(e) {
var container = $('#schedule-demo');
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(container).validate().resetForm();
$(container).get(0).reset();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form id="schedule-demo" hubspot-form-id="5bd0f54b-4329-40dd-973e-f1fedce07775">
<p>Please provide us your contact information and the expert will reach out shortly.</p>
<div class="form-group">
<label for="demo-first-name">First Name *</label>
<input type="text" name="firstname" class="form-control" id="demo-first-name">
</div>
<div class="form-group">
<label for="demo-last-name">Last Name *</label>
<input type="text" name="lastname" class="form-control" id="demo-last-name">
</div>
<div class="form-group">
<label for="demo-email">Work Email *</label>
<input type="email" name="email" class="form-control" id="demo-email">
</div>
<div class="form-group">
<label for="demo-phone">Phone Number *</label>
<input type="text" name="phone" class="form-control" id="demo-phone">
</div>
<div class="button-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
</div>
</form>
<button>click outside of container</button>
As a side note...
submitHandler: function(form, event) {
submitInformationForm(form);
event.preventDefault();
return false;
}
Using preventDefault() inside of your submitHandler function is completely pointless as the plugin developer does not provide a default event to prevent.
submitHandler: function(form) {
submitInformationForm(form);
return false;
}

Jquery.Validate Password Equalto - doesn't display error

I am able to set Required = true, min and max lengths but for some reason when i try to set an EqualTo paramater for the PasswordAgain field, the form simply allows Submit even though the passwords do not match.
<section>
<label class="input login-input">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtUserName" type="text" id="txtUserName" class="form-control" placeholder="UserName" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtEmail" type="text" id="txtEmail" class="form-control" placeholder="Email Address" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtPassword" type="password" id="txtPassword" class="form-control" placeholder="Password" />
</div>
</label>
</section>
<section>
<label class="input login-input no-border-top">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input name="ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain" type="password" id="txtPasswordAgain" class="form-control" placeholder="Password Confirm" />
</div>
</label>
</section>
<script src="<%= ResolveUrl("~/Content/assets/plugins/sky-forms-pro/skyforms/js/jquery.form.min.js")%>"></script>
<script src="<%= ResolveUrl("~/Content/assets/plugins/sky-forms-pro/skyforms/js/jquery.validate.min.js")%>"></script>
<script>
jQuery(document).ready(function() {
$("#form1").validate({
// Rules for form validation
rules:
{
ctl00$ContentPlaceHolder1$ctl01$txtUserName:
{
required: true
},
ctl00$ContentPlaceHolder1$ctl01$txtEmail:
{
required: true,
email: true
},
ctl00$ContentPlaceHolder1$ctl01$txtPassword:
{
required: true,
minlength: 6,
maxlength: 20
},
ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{
required:true,
minlength:6,
equalTo:"#ctl00$ContentPlaceHolder1$ctl01$txtPassword"
}
},
// Messages for form validation
messages:
{
ctl00$ContentPlaceHolder1$ctl01$txtUserName:
{
required: '* Requires a valid UserName.'
},
ctl00$ContentPlaceHolder1$ctl01$txtEmail:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.'
},
ctl00$ContentPlaceHolder1$ctl01$txtPassword:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.'
},
ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{
required: '* This is a Required Field.',
minlength: '* Password Min Length of 6 char.',
equalTo: "Please specify the same password as above."
}
},
// Do not change code below
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});
});
</script>

ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain:
{ required:true,
equalTo:"#ctl00$ContentPlaceHolder1$ctl01$txtPassword"
}
Remove minlength from ctl00$ContentPlaceHolder1$ctl01$txtPasswordAgain
i hope maybe it works

Form validation styles not working

I've been experimenting with JQuery form validation, but haven't been able to get success/failure classes to be added once the validation has been complete.
Here is my code:
https://jsfiddle.net/5WMff/
<form method = "post" id = "signUpForm">
<div class="modal-body">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" class="form-control" name="firstName">
</div>
<div class="form-group">
<label for="surname">Surname:</label>
<input type="text" class="form-control" name="surname" >
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number:</label>
<input type="phone" class="form-control" name="phoneNumber">
</div>
<div class="form-group">
<label for="postalCode">Home Postcode:</label>
<input type="text" class="form-control" name="postalCode">
</div>
<div class="checkbox">
<label><input type="checkbox" name = "acceptTCs">Accept Terms and Conditions</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Back</button>
<input type = "submit" name = "submit" class = "btn btn-success btn-large" value = "Submit" ></button>
</div>
</form>
JS:
$(document).ready(function () {
$('#signUpForm').validate({
rules: {
firstName: {
minlength: 2,
required: true
},
surname: {
required: true,
email: true
},
email: {
minlength: 2,
required: true
},
phoneNumber: {
minlength: 7,
required: true
}
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.form-group').removeClass('error').addClass('success');
}
});
});
The validation (OK vs. more info required) is working fine, it's just failing to add the success/failure class as well. I know it's something obvious I've missed out, but have come to a bit of a dead end.
The effect I'm looking for is like here: http://jsfiddle.net/5WMff/
Thanks.

$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
Use submitHandler . Hope this will help you.

Groovy <g:form> validate using jquery validate()

below is example of form validation using jquery what I copied from internet,
however, when I used <g:form> instead of <form> validate function not work.
Please suggest better way to validate form using groovy form
Thanks
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<!-- Load jQuery and the validate plugin -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<!-- jQuery Form Validation code -->
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
// Specify the validation error messages
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<!-- The form that will be parsed by jQuery before submit -->
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Password</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html

Your <form> tag contains novalidate Attribute which Indicates that the form is not to be validated on submit, get rid of that first. Following is sample code from test project to use jquery validation with <g:form>. Sorry for long code.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="esn-registration">
<script type="text/javascript">
$(document).ready(function() {
$.validator.addMethod("emailId", function(value, element) {
return this.optional(element) || /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value);
}, "Email is invalid: Enter a valid email");
$.validator.addMethod("username", function(value, element) {
return this.optional(element) || /^[a-z][\w.-]{3,20}$/i.test(value);
}, "Characters, numbers, ( _ ), ( - ) and ( . ) only");
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstName: "required",
lastName: "required",
emailId: {
required: true,
email: true,
emailId: true
},
username: {
required: true,
minlength: 3,
maxlength: 20,
username: true
},
password: {
required: true,
minlength: 6
}
},
messages: {
firstName: { required: "Please enter your first name" },
lastName: { required: "Please enter your last name" },
emailId: {
required: "Please enter an email address",
email: "Please enter a valid email address"
},
username: {
required: "Please enter an username",
minlength: "Username must exceed 3 characters",
maxlength: "Username cannot exceed 20 characters"
},
password: {
required: "Please provide a password",
minlength: "Password must exceed 6 characters"
}
},
submitHandler: function(form) {
if(signupForm.valid()){
form.submit();
$('button[type="submit"]').removeAttr('disabled');
} else {
$('button[type="submit"]').attr('disabled','disabled');
}
}
});
// validate login form on keyup and submit
$("#loginForm").validate({
rules: {
username: "required",
password: {
required: true,
minlength: 6
}
},
messages: {
username: {
required: "Please enter an username or email",
},
password: {
required: "Please provide a password",
minlength: "Password must exceed 6 characters"
}
},
submitHandler: function(form) {
if(loginForm.valid()){
form.submit();
$('button[type="submit"]').removeAttr('disabled');
} else {
$('button[type="submit"]').attr('disabled','disabled');
}
}
});
// propose username by combining first and lastname
$("#username").focus(function() {
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
if(firstName && lastName && !this.value) {
this.value = $.trim(firstName) + "." + $.trim(lastName);
}
});
});
</script>
<title>ESN</title>
</head>
<body>
<div class="front-card">
<div class="front-welcome">
<div class="front-welcome-text">
<h3>Welcome</h3>
</div>
</div>
<div class="front-login">
<g:form name="loginForm" controller="login" action="validate"
method="POST" class="form well well-small container-fluid span3.5">
<div id="login-form">
<div class="placeholding-login-username">
<input id="user-name" name="username"
value="${loginInstance?.username }"
placeholder="Username or email" class="input-xlarge" type="text"
maxlength="100" required/>
</div>
<div class="placeholding-login-password">
<input id="password" name="password"
value="${loginInstance?.password }"
placeholder="Password(min. length 6)" class="input-xlarge"
type="password" maxlength="30" required/>
</div>
<g:if test="${message}">
<div class="message text-error" role="status">
<ul class="errors" role="alert">
<li>
${message}
</li>
</ul>
</div>
</g:if>
<div class="button pull-right">
<button name="submit" class="btn" type="submit">Login</button>
</div>
</div>
</g:form>
</div>
<div class="front-signup">
<g:form name="signupForm" action="save" method="POST"
class="form well well-small container-fluid span3.5">
<div id="signup-form">
<fieldset class="form">
<legend>
<h5>
<strong class="muted">New to ESN?</strong> <strong
class="text-info"> Sign up</strong>
</h5>
</legend>
<div class="placeholding-first-name">
<input id="firstName" name="firstName"
value="${userInstance?.firstName}" placeholder="First name"
class="input-xlarge" type="text" maxlength="150" required/>
</div>
<div class="placeholding-last-name">
<input id="lastName" name="lastName"
value="${userInstance?.lastName}" placeholder="Last name"
class="input-xlarge" type="text" maxlength="150" required/>
</div>
<div class="placeholding-email-id">
<input id="emailId" name="emailId"
value="${userInstance?.emailId}" placeholder="Email Id(Corporate)"
class="input-xlarge" type="email" maxlength="100" required/>
</div>
<div class="placeholding-signup-username">
<input id="username" name="username"
value="${userInstance?.username}" placeholder="Username"
class="input-xlarge" type="text" maxlength="20" required/>
</div>
<div class="placeholding-signup-password">
<input id="password" name="password"
value="${userInstance?.password}"
placeholder="Password(min. length 6)" class="input-xlarge"
type="password" maxlength="30" required/>
</div>
</fieldset>
<fieldset class="button pull-right">
<button id="submit" name="submit" class="btn btn-primary" type="submit">Sign
up</button>
</fieldset>
<div>
<g:if test="${blankMessage}">
<div class="message text-error" role="status">
<ul class="errors" role="alert">
<li>
${blankMessage}
</li>
</ul>
</div>
</g:if>
<g:hasErrors bean="${userInstance}">
<div class="text-error">
<ul class="errors" role="alert">
<g:eachError bean="${userInstance}" var="error">
<li
<g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message
error="${error}" /></li>
</g:eachError>
</ul>
</div>
</g:hasErrors>
</div>
</div>
</g:form>
</div>
</div>
</body>
</html>

Password confirmation not being fired

I am having some trouble having my password validation working, I think that the javascript is now correctly defined but I am not able to validate the form successfull as it keeps posting regardless of the errors.
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#model Models.ResetModel
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#close').click(function (event) {
closeAjax();
event.cancelBubble = true;
event.returnValue = false;
event.preventDefault();
event.stopPropagation();
});
});
$(document).ready(function () {
$("#resetForm").validate({
rules: {
password: {
require: true,
minlength: 6
},
confirmpassword: {
require: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
password: {
require: "You must enter a password!",
minlength: "Password must contain at least 6 characters"
},
confirmpassword: {
require: "You must enter a password confirmation!",
minlength: "Password must contain at least 6 characters",
equalTo: "Password and Password Confirmation fields do not match!"
}
}
});
});
here is the HTML:
<div class="form_container">
<div class="logo">
<img class="logo" src="#Url.Content("~/Content/SP_Logo_white.png")" alt="SmartPlant Cloud"/>
</div>
<div class="reset">
<h3>Password Reset</h3>
<div class="reset-help">
<p>Forgot your password? Use the form to change or reset your password.</p>
</div>
#using (Html.BeginForm("Reset", "Reset", new { qString = Model.QueryString, #id = "resetForm" } ))
{
<label for="reset">UserName:</label>
<input type="text" id="username" name="username" /><br />
<label for="password">New Password:</label>
<input type="password" id="password" name="password" /><br />
<label for="confirmpassword">Confirm Password:</label>
<input type="password" id="confirmpassword" name="confirmpassword" />
<p><input type="submit" id="submit" value="Submit" /></p>
}
</div>

You need to create the function to validate the form client side that will return a value "false" value if the data entered is incorrect, hence the from will not be submitted. This does NOT involve PHP it's to catch it before the PHP is loaded..
You can do validation checks also- server side as well.
function Validate()
{
//insert javascript validation check
return false;
}
<form onsubmit="return Validate();" action="your.php" method="post" name="your name" >
<label for="reset">UserName:</label>
<input type="text" id="username" name="username" /><br />
<label for="password">New Password:</label>
<input type="password" id="password" name="password" /><br />
<label for="confirmpassword">Confirm Password:</label>
<input type="password" id="confirmpassword" name="confirmpassword" />
<p><input type="submit" id="submit" value="Submit" /></p>
</form>
Hope this helps.