My form is submitted by a link using JavaScript, but I am also trying to validate the from justing jQuery validate. The validation doesn't work when submitted by the link, but it does if I change the link to a submit button. What am I doing wrong?
My form:
<form id="findmatch" method="post" action="search">
<div>
<label class="formlabel">Match Type
<input type="text" name="matchtype" id="matchtype" class="forminput" />
</label>
<label class="formlabel">Location (postcode)
<input type="text" name="location" id="location" class="forminput" />
</label>
<label class="formlabel">Radius (miles)
<input type="text" name="Radius" id="Radius" class="forminput" />
</label>
<label class="formlabel">Keywords
<input type="text" onblur="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" onchange="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" name="keywords" id="keywords" class="forminput" />
</label>
<input id="lat" class="hidden" name="lat" type="text" value="" />
<input id="lon" class="hidden" name="lon" type="text" value="" />
Search
</div>
</form>
And my jQuery is
<script type="text/javascript">
$(document).ready(function () {
$("#findmatch").validate({
rules: {
location: "required",
Radius: {
required: true,
digits: true
},
keywords: "required"
},
messages: {
location: "Please enter your postcode",
Radius: {
required: "Please enter a radius",
digits: "Please only enter numbers"
},
keywords: "Please enter the keywords you wish to search for"
}
});
});
</script>
DEMO: http://jsbin.com/urole/3
$(function () {
$('#submit').click(function(e) {
e.preventDefault();
$("#commentForm").submit();
});
$("#commentForm").validate();
});
submit
Related
I am trying to make an alert say "Please enter your email address." when no email address is entered in this form. Why isn't the alert showing up when you do not enter an email address with this code?
<script language="JavaScript" type="text/javascript">
<!--
function checkform ()
{ if (input.email.value == "") {
alert( "Please enter your email address." );
input.email.focus();
return false ;
}
return true ;
}
</script>
<form action="#" id="input" name="input" onsubmit="greeting()">
Username: <input id="email" name="email" type="text" value=""><br>
Password: <input name="pwd" type="password"><br>
<input name="gender" type="radio" value="male">Male<br>
<input name="gender" type="radio" value="female">Female<br>
<input type="submit" value="Submit">
</form>
I've searched all over these forums and tried a number of different solutions, but I'm just not able to find a way to make my form validate the First Name, Last Name and Email fields, while redirecting afterward. I can get it to do one or the other, but not both.
Below is my code. I'm new to javascript, but I think I'm close to having this work:
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
});
$("#signupForm").submit(function(event){
window.location = 'http://www.lifebridgehealth.org/campaign/newneighborsdownload.aspx';
});
</script>
</script>
<style>
#commentForm {
width: 500px;
}
#commentForm label {
width: 250px;
}
#commentForm label.error, #commentForm input.submit {
margin-left: 253px;
}
#signupForm {
width: 670px;
}
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
<body>
<div id="main">
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<p>
<input type="hidden" class="reference" id="HC4__Inquiry__c.RecordTypeId" name="HC4__Inquiry__c.RecordTypeId" value="01246000000tqltAAA" />
<input type="hidden" class="picklist" id="HC4__Inquiry__c.HC4__Status__c" name="HC4__Inquiry__c.HC4__Status__c" value="Open" />
<input type="hidden" class="string" id="HC4__Inquiry__c.HC4__Subject__c" name="HC4__Inquiry__c.HC4__Subject__c" value="DG_LBH_PRIM_NewMovers_CY17 form submission" />
<input type="hidden" class="picklist" id="Patient.LeadSource" name="Patient.LeadSource" value="Web Form: DG_LBH_Primary Care_New Movers" />
<input type="hidden" class="picklist" id="Patient.HC4__MostRecentLeadSource__c" name="Patient.HC4__MostRecentLeadSource__c" value="Web Form: DG_LBH_Primary Care_New Movers_FY17" />
<input type="hidden" class="string" id="DemandConnectForm" name="DemandConnect.Form" value="DG_LBH_PRIM_NewMovers_CY17" />
<label class="string" id="Patient.FirstName_label" for="Patient.FirstName">First Name</label>
<input type="text" class="string" id="Patient.FirstName" name="Patient.FirstName" value="" required/><br/>
<label class="string" id="Patient.LastName_label" for="Patient.LastName">Last Name</label>
<input type="text" class="string" id="Patient.LastName" name="Patient.LastName" value="" required/><br/>
<label class="email" id="Patient.Email_label" for="Patient.Email">Email</label><input type="text" class="email" id="Patient.Email" name="Patient.Email" value="" required/><br/>
<label class="string" id="Patient.PostalCode_label" for="Patient.PostalCode">Mailing Zip/Postal Code</label>
<input type="text" class="string" id="Patient.PostalCode" name="Patient.PostalCode" value="" /><br/>
<label class="phone" id="Patient.Phone_label" for="Patient.Phone">Home Phone</label>
<input type="text" class="phone" id="Patient.Phone" name="Patient.Phone" value="" data-fv-field="phonenumber"/><br/>
<label class="phone" id="Patient.MobilePhone_label" for="Patient.MobilePhone">Mobile Phone</label>
<input type="text" class="phone" id="Patient.MobilePhone" name="Patient.MobilePhone" value="" data-fv-field="phonenumber"/><br/>
<label class="picklist" id="HC4__Inquiry__c.HC4__PreferredContactMethod__c_label" for="HC4__Inquiry__c.HC4__PreferredContactMethod__c">Preferred Contact Method</label>
<select type="picklist" class="picklist" id="HC4__Inquiry__c.HC4__PreferredContactMethod__c" name="HC4__Inquiry__c.HC4__PreferredContactMethod__c" />
<option value="Home Phone">Home Phone</option>
<option value="Mobile Phone">Mobile Phone</option>
</select>
<br/>
<label class="picklist" id="HC4__Inquiry__c.Best_Time_to_Reach_You__c_label" for="HC4__Inquiry__c.Best_Time_to_Reach_You__c">Best Time to Reach You</label>
<select type="picklist" class="picklist" id="HC4__Inquiry__c.Best_Time_to_Reach_You__c" name="HC4__Inquiry__c.Best_Time_to_Reach_You__c" />
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
</select>
<br/>
<label class="boolean" id="HC4__Inquiry__c.Call_Me_Back_to_Schedule_an_Appointment__c_label" for="HC4__Inquiry__c.Call_Me_Back_to_Schedule_an_Appointment__c">Please Call Me Back to Schedule an Appointment</label>
<input type="checkbox" class="boolean" id="HC4__Inquiry__c.Call_Me_Back_to_Schedule_an_Appointment__c" name="HC4__Inquiry__c.Call_Me_Back_to_Schedule_an_Appointment__c" /><br/>
<input type="submit" value="Submit" />
<br/>
<label class="boolean" id="Patient.WantstoLearnMoreAboutLBH__c_label" for="Patient.WantstoLearnMoreAboutLBH__c" >Learn More About LBH?</label>
<input type="checkbox" class="boolean" id="Patient.WantstoLearnMoreAboutLBH__c" name="Patient.WantstoLearnMoreAboutLBH__c" checked />
<br/>
</p>
</p>
</fieldset>
</form>
</div>
<script>
$("#DG_LBH_PRIM_NewMovers_CY17").validate();
</script>
</body>
</html>
You should be performing your validation within your submit function $("#signupForm").submit(...
The submit function then normally needs to return either true or false. True will trigger the form submission, false will prevent the submission.
As you want to redirect elsewhere, you are better off overriding the default functionality entirely. Do this by calling preventDefault on the submit event.
$("#signupForm").submit(function(event){
event.preventDefault()...
Then you can perform your validation and redirect if necessary
I have one form that contains additional sub forms (contained as divs) for example:
<form method="post" action="/process" id="form">
<div id="initForm">
<input type="text" name="name" placeholder="Please enter your name" />
<input type="email" name="email" placeholder="Please enter your email" />
<button class="next">Continue</button>
</div>
<div class="subForm">
<input type="text" name="jobPosition" placeholder="Please enter your job position" />
<input type="text" name="jobCompany" placeholder="Please enter your company" />
<button class="next">Continue</button>
</div>
<input type="submit" name="submit" value="Send" />
</form>
I want to use the validate plugin for the form, so whenever someone presses on next I want to validate this particular part of this form it validates before it lets you continue. I am therefore wondering is this possible to do this? I have used the below, but this is not doing anything. It gives no errors and is not validating the form. Can anyone tell me where I am going wrong?
$("form#initForm").validate({
rules: {
name: "required",
},
messages: {
name: "Please enter a valid name"
}
});
Your id of the form is different of the one you use in jQuery and the $('form#form") should be either $('form#form') or $("form#form").
See the working snippet below:
$(document).ready(function() {
$('#form').validate({
rules: {
name: "required",
jobPosition: "required"
},
messages: {
name: "Please enter a valid name",
jobPosition: "Please enter a valid job"
}
});
$('.next').on('click', function(e){
e.preventDefault();
$(this).parent().find('input:first').valid();
});
});
label.error{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<form method="post" action="" id="form">
<div id="initForm">
<input type="text" name="name" placeholder="Please enter your name" />
<input type="email" name="email" placeholder="Please enter your email" />
<button class="next">Continue</button>
</div>
<div class="subForm">
<input type="text" name="jobPosition" placeholder="Please enter your job position" />
<input type="text" name="jobCompany" placeholder="Please enter your company" />
<button class="next">Continue</button>
</div>
<input type="submit" name="submit" value="Send" />
</form>
I am new to Jquery validation plugin.
I am trying to display the error message return by the validator below the control , currently it is displaying the error message beside the control to validate.
Any help would be appreciated.
My code below
<html>
<head>
<title>Index</title>
<script src="~/Scripts/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script>
$(document).ready(function () {
$('form').validate({
rules: {
myName: "required",
myPassword: "required"
},
messages: {
myName: "Please specify your name",
myPassword: "Please specify your password"
}
});
});
</script>
</head>
<body>
<form >
<label>Username</label>
<input type="text" name="myName" id="myName" placeholder="Type your username here..." /> <br/>
<label>Password</label>
<input type="text" name="myPassword" id="myPassword" placeholder="Type your password
here..." /> <br/>
<input type="submit" class ="btn btn-primary">
<button class=""> Clear <br/></button><br/>
</form>
</body>
</html>
If you want that error message should appear below from text field then replace your input field with below snippet.
<input type="text" name="myName" id="myName" placeholder="Type your username here..." style="display:block" />
<input type="text" name="myPassword" id="myPassword" placeholder="Type your password
here..." style="display:block" />
I'm using a JavaScript validator from http://www.javascript-coder.com/html-form/javascript-form-validation.phtml. The problem I'm facing is that I have one button that saves the registration (here I need to check for name and last name) and the second button which checks the entire form. However, if I press any button, it checks the entire form.
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
frmvalidator.addValidation("organization","req","Please enter the organization");
</script>
Maybe this will work. Add validation for proper input fields onClick:
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" onclick="return btnSave_click();" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" onclick="return btnRegister_click();" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
function btnSave_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
return true;
}
function btnRegister_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("organization","req","Please enter the organization");
return true;
}
</script>
I guess you will need to write a custom validation function