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>
Related
I have a master page and in that master page I have:
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
My question is in my child pages do I need to use the form element to implement the validate method?
For example script in child form:
$("#commentForm").validate({
rules: {
name: "required",
email: "required",
comment: "required"
},
messages: {
name: "Please enter a name",
email: "Please enter an email",
comment: "Enter a comment"
},
submitHandler: function(form) {
form.submit();
}
});
The child form html is:
<div id="commentForm">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<div class="form-group">
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" class="form-control" name="name" minlength="2" type="text">
</div>
<div class="form-group">
<label for="cemail">E-Mail (required)</label>
<input id="cemail" class="form-control" type="email" name="email">
</div>
<div class="form-group">
<label for="curl">URL (optional)</label>
<input id="curl" class="form-control" type="url" name="url">
</div>
<div class="form-group">
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" class="form-control" name="comment" rows="3"></textarea>
</div>
<div class="form-group">
<input class="submit" type="submit" value="Submit">
</div>
</fieldset>
</div>
$("#commentForm").validate will not work. However if I switch it to $("#form1").validate it will.
Since I can't nest forms is it possible to implement the validate method on anything other then the parent form element?
From the docs:
.validate()
Description: Validates the selected form.
So yes it assumed that the selected element is a 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 want to stay on the current page, if the "Name" input field is empty.
Right now, it shows the error message, and when you click ok, it still goes to the next page (contactcaptcha.php).
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
<form id="action" action="contactcaptcha.php" method="post">
<fieldset>
<textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>
<input id="Name" name="Name" placeholder="Enter your full name" type="text">
<input id="Email" name="Email" placeholder="Enter your email address" type="email">
<input type="submit" onclick="notEmpty(document.getElementById('Name'), 'Please enter your name')" name="submit" value="Send your message">
</fieldset>
try like so, returning your function at submit event of the form element
<form id="action" action="contactcaptcha.php" method="post"
onsubmit="return notEmpty(document.getElementById('Name'), 'Please enter your name')">
<fieldset>
...
<input type="submit" name="submit" value="Send your message">
</fieldset>
</form>
Misssing return keyword:
<input type="submit"
onclick="return notEmpty(document.getElementById('Name'), 'Please enter your name')"
name="submit" value="Send your message">
As you use HTML5 anyway, you might want to use the required attribute: http://www.w3schools.com/html5/att_input_required.asp
<form>
<input id="message" required>
<input type="submit" value="Submit">
</form>
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
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