I have a form that uses a link to submit the results.
I'm using Jquery validation plugin.
I can get the form to validate if I use a normal button to submit the form.
How can I call the Jquery function from a hyperlink instead of a button.
Here's my jquery:
<script type="text/javascript">
$(document).ready(function () {
$('#newsletter_form').validate({
rules: {
CONTACTS_EMAIL: {
required: true,
email: true
},
CONTACTS_PRIVACY_POLICY_AGREE: "required",
},
messages: {
CONTACTS_PRIVACY_POLICY_AGREE: "<?php echo $FRM_ERRMSG_CONTACTS_PRIVACY_POLICY_AGREE;?>",
CONTACTS_EMAIL: {
required: "<?php echo $FRM_ERRMSG_CONTACTS_EMAIL;?>",
email: "<?php echo $FRM_ERRMSG_CONTACTS_EMAIL_FORMAT;?>"
}
},
submitHandler: function (form) {
form.submit();
}
});
});
</script>
And here is my html (with some php inside to be ignored)
<form id="newsletter_form" name="newsletter_form" action="newsletter_submit.php" method="post" >
<br>
<div class="mc-field-group">
<input type="text" name="CONTACTS_EMAIL" placeholder="*<?echo $EMAIL_FIELD_TEXT;?>" style="width: 280px;font-size: 20px;" /><br>
<input type="checkbox" name="CONTACTS_PRIVACY_POLICY_AGREE"> <?echo $PRIVACY_POLICY;?> * <label for="CONTACTS_PRIVACY_POLICY_AGREE" class="error" style="display:none;"></label>
<input type="hidden" name="CONTACTS_LANGUAGE" value="<?echo $language;?>">
<div>
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' name='newsletter_form'>
<a style="margin-top:22px;" class="wsite-button external-link" onclick="document.getElementById('newsletter_form').submit()">
<span class="wsite-button-inner"><?echo $BUTTON_TEXT;?></span></a>
</div>
</div>
</form>
Try using jQuery to trigger the submit event:
onclick="$('#commentForm').submit();"
There's a lot that could be improved here, but that may fix your core problem. I remember something like this happening to me a long time ago.
Related
I have the following jquery code
$().ready(function){
$("#Form").validate({
rules:{
DL:{
minlength:2
}
}
});
}
message:{
DL:{
minlength:"DL should be of at least 5";
}
}
The validation required is that the field DL should have length of 5.
The html code is below
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input
type="text" class="form-control" id="DL" required>
</div>
But the page does not seem to validate, after clicking a button, instead of showing message the page just scrolls upwards.
Here is your solution
https://jsfiddle.net/geradrum/far1fj1n/
All the code have syntax errors.
And the $() should be $(document)
The main problem is that the rules object looks for the element's name and you were using the id of the element.
index.html
<form id="FORM">
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input type="text" class="form-control" name="DL" required>
</div>
<input type="submit" value="Validate!">
</form>
app.js
$(document).ready(function(){
$( "#FORM" ).validate({
rules: {
DL: {
required: true,
minlength: 5
}
},
messages: {
DL: "DL should be of at least 5"
}
});
});
I'm trying to make this piece of code work. But there is something wrong with it. I don't know what. Anyone care to help here.
Thanks
The problem is that when the form is submitted and it doesn't show any validation messages.
<?php
session_start();
include 'connection.php';
if(isset($_POST['submit'])){
$name=$_POST['name'];
$f_name=$_POST['f_name'];
$cell=$_POST['cell_no'];
$_SESSION['name']=$name;
$_SESSION['f_name']=$f_name;
$_SESSION['cell']=$cell;
}
?>
<html>
<head>
<script src="jquery-1.3.1.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#myForm").validate({
rules: {
name: "required",
f_name: "required",
cell_no: {
required: true,
minlenght: 11
}
},
messages: {
name: "Please state your name.",
f_name: "Father name is required.",
cell_no: {
required: "Please provide a contact number.",
minlength: "Minimum length is 11 digits"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<center>
<?php
echo #$_GET['sheikh'];
?>
</center>
<form method="POST" action="" id="myForm" novalidate="novalidate">
<center><h1>First Form</h1></center>
<h2>Basic Information</h2>
Name:<input type="text" name="name">
Father name:<input type="text" name="f_name">
Cell_no:<input type="text" name="cell_no">
<input type="submit" name="submit" value="next">
</form>
</body>
</html>
Please try checking the console log when you have this kind of issues.
You will come to know what is the problem.
when the page loads it shows,
"Uncaught TypeError: $(...).validate is not a function"
this means the required library not exists with you code.
Download it and insert in your page like
script src="jquery-1.3.1.min.js"
you did or give direct link if you doing this for learning purpose.
Problems in your script:
You have included jQuery twice on the page
You haven't included jQuery.validate.js
I am trying to get the jquery validator to run on the specific submit button not on all buttons.
<form id="incidentform" action="/emplincidata.php" method="get">
<input type="submit" class="button" name="updateincidentButton" value="Update Incident"/>
<input type="button" class="button" name="cancelincidentButton" value="Cancel Incident"/>
<br />
<div class="makescroll" id="bysuper">
<div class="incident">
<label class="title">TO BE COMPLETED BY THE SUPERVISOR</label><br />
<div>
<label class="eighth" for="incidate">Incident Date</label>
<input type="text" id="incidate" name="incidate" class="datepick" />
<label class="eighth" for="incidtime">Incident Time</label>
<input type="text" id="incidtime" name="incidtime" class="timeinput" />
<label class="eighth" for="shift">Shift</label>
<select id="shift" name="shift">
<option selected="selected"></option>
<option>Day</option>
<option>Evening</option>
<option>Night</option>
</select>
</div>
</div>
</div>
</form>
Here is the javascript. This code does not work when I have the submit catptured. I also tried click here and it failed.
$(function(){
$("#updateincidentButton").submit(function(){
$("form").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
}
})
})
})
You have not given Id selector to your submit button. so please give Id selector as below:
<input type="submit" class="button" id="updateincidentButton" name="updateincidentButton" value="Update Incident"/>
Please try as shown below:-
$(document).ready(function(){
/* Bind Validate() to Form */
$("#incidentform").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
}
})
/* Bind Click() to Button*/
$("input[name=updateincidentButton]").click(function () {
if ($(#incidentform).valid()) {
// post stuffs
}
return false;
});
});
Try this:
$(document).ready(function(){
/* Bind Validate() to Form */
$("#incidentform").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
},
submitHandler :function() {
// DO STUFF HERE WHEN EVERYTHING IS VALIDATED e.g submit form
alert('VALID');
}
})
});
Fiddle: http://jsfiddle.net/ZKge8/
Just scroll to the bottom of the page to skip the validate plugin script.
I have dynamically created rows, on each rows i have a add button when user click on the add button then dynamically created form will be loaded on the bootstrap propover.
FIDDLE DEMO
my problem is :
why this code is NOT getting call?
Basically i am Submitting this form From bootstrap popover ?
...............
...............
console.log($("#"+formidd));// NOTE: i have accurate form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
...............
...............
Any help will be highly appreciated.Please help me...
Form looks like this:(I want to validate It & submit it when user press ENTER)
My html data look like this:
<div id="project-div-id">
<ul style="padding: 0px 0 2px;margin-left: 0px;">
<li><span class="slilink"> tour </span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="160subproj" id="160subproj" style="display:none;">
<input type="text" value="1st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> personal</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj" style="display:none;">
<input type="text" value="2st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> business</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="162subproj" id="162subproj" style="display:none;">
<input type="text" value="3rd form">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
</div>
This is my FULL jquery code:
<script type="text/javascript">
$(document).ready(function() { var formidd='';
$('.add_btn').popover({
html: true,
title: function () {
formidd=$(this).parent().find('.projform_id').html();
return $(this).parent().find('.sub_proj_head').html();
},
content: function() {
return $(this).parent().find('.sub_proj_content').html();
}
});
$('.add_btn').click(function(e) {
console.log($("#"+formidd));//i have loaded form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
$('.add_btn').not(this).popover('hide');
e.stopPropagation();
});
$(document).click(function(e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.add_btn').popover('hide');
}
});
});
</script>
I think I see what you're trying to do. The enter button will not work by default unless you have an <input type='submit' /> somewhere in the form.
Some hackery you can try is to place a submit button right after your input, give it a classname like "invisible", and set that class to remove all borders, margins, padding, etc... Warning, setting display:none will not work because some browsers effectively remove the element.
For example: jsfiddle
EDIT: I only got tour to work in the fiddle, but the idea is the same. There has to be a submit input inside the form.
What's the easiest way to clear this form after refresh. The way I have tried will clear the form but not submit to the database. Could someone else explain to me the best way to do this.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#newsletterform").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('newsletter.php', $("#newsletterform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
</head>
<div id="content">
<div id="newsletter-signup">
<h1>Sign up for News, Updates, and Offers!</h1>
<form id="newsletterform" action="" method="post">
<fieldset>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" />
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" />
</li>
<div id="results"><div>
<li>
<input type="submit" value="submit" name="signup" onclick="" />
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</html>
You can add this to the callback from $.post
$( '#newsletterform' ).each(function(){
this.reset();
});
You can't just call $( '#newsletterform' ).reset() because .reset() is a form object and not a jquery object, or something to that effect. You can read more about it here about half way down the page.
You can reset your form with:
$("#myform")[0].reset();
Better way to reset your form with jQuery is Simply trigger a reset event on your form.
$("#btn1").click(function () {
$("form").trigger("reset");
});
try this in your post methods callback function
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
for more info read this
Propably this would do it for you.
$('input').val('').removeAttr('checked').removeAttr('selected');
A quick reset of the form fields is possible with this jQuery reset function.
$(selector)[0].reset();
Just add this to your Action file in some div or td, so that it comes with incoming XML object
<script type="text/javascript">
$("#formname").resetForm();
</script>
Where "formname" is the id of form you want to edit