|
JavaScript - Jquery Validation Using A Link Instead Of Submit Button
Hi everyone,
I currently use javascript in an anchor tag to submit a form using Code: <a href="#" onClick="document.myformname.submit(); return false;">Submit</a> The only problem is, JQuery doesn't acknowledge that my form has been submitted. Has anyone come up against this problem before? If so, can you please share your work around? Thank you! B Similar TutorialsHello all I created a form which has a lot of textboxes, checkboxes and select-lists which are getting filled up by the records from a database table. I am basically creating an edit screen for a record. No I want to check all these input elements using javascript validation. I want this to performed when a button "Archive" is pressed. My problem is this "Archive button" needs to be a submit button. This does run the javascript validation but after completing the validation it submits the form. I want that submission should be stopped when the validation is violated. how can I do this? What I want is a button which acts as a default button (triggers the onclick event when I press enter) but submits only if the form is valid. Hi, I am having a problem with my script used to disable my submit button. I want the button to disable upon correct submission of the form, and the button to be kept enabled if the required fields are not filled in. I have the following code at the moment (which only does the first if statement). Code: SCRIPT CODE:
<script type="text/javascript" >
function validateForm()
{
var amount=document.forms["expenserecord"]["amount"].value;
var picker=document.forms["expenserecord"]["picker"].value;
var desc=document.forms["expenserecord"]["description"].value;
if (amount==null || amount=="" || picker==null || picker=="" || desc==null || desc=="") {
alert("All required fields must be filled out.");
document.getElementById("sub").disabled = false;
return false;
}
else {
document.getElementByID("sub").disabled = true;
}
}
</script>
BUTTON CODE:
<p><input type="submit" value="Submit" onClick="return validateForm()" id="sub"></p>
I would like my form submit button to show as a link instead of a button, where it will be a link and pass the city value to the action page: Code: <form action="goTo.jsp" method="post"> <input type="text" name="city"> <input type="submit"> </form> Please advise. I have created some online software which uses form data to submit to another page. The problem is that I have other submit buttons in the same form which submit to different pages (depending on which button is pressed). The first submit button works fine but all the others only work once. Code: <input class="cssbutton" type='submit' value='Button1' onclick="wbform.action='page1.php'; target='mainFrame'; return true;"> <input class="cssbutton" type='submit' value='Button2' onclick="wbform.action='page2.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button3' onclick="wbform.action='page3.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button4' onclick="wbform.action='page4.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button5' onclick="wbform.action='page5.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button6' onclick="wbform.action='page6.php'; target='_blank'; return true;"> Any ideas my friends? I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul I have created a php script that POSTs to another page sendmail.php which then redirects to a thanks/successful page. Is it possible to have the form submit and return a thank you message on the same page. basically submit the form without reloading. So, I know there are lots of threads out there about the jQuery validation plugin and people having issues with IE7, but most of them come down to syntax issues with a closing comma or what not. With that said, I have milled over this code of least a full day now and still have no idea why it fails in IE (all versions) http://jsfiddle.net/rM3ej/4/ Can anyone give me some ideas or insight why this would completely fail? Thanks in advanced. All, I currently have a form on my page and I found this on the jQuery website: Code: $.post("test.php", $("#testform").serialize());
However, I want to do something after the results are posted so I think I need a hybrid of the one above and this one: Code: $.post("test.php", function(data) {
alert("Data Loaded: " + data);
});
Any help would be greatly appreciated. My form id is saveCrop, not sure if that makes a difference or not. Thanks in advance! Hi all. I am using the Inline Form Validation Engine jQuery plugin found here, and though I have posted at their forum as well, am having a heck of a time (not being well versed in js OR Ajax, unfortunately) All I need to do is edit the code so that when the onSubmit function is processed, it returns only the first error it encounters, rather than keeping and display the array of every error. I have picked through the code several times, and can't seem to find where the array is stored. I thought perhaps I could find a for loop to limit, but am at a complete loss. Is there anyone out there who can help? I can post the code if needed; I didn't want to post the entire file (since I don't know which snippet is the one I need!) Thank you in advance! Hello guys, I have implemented the jquery validation in one of my projects. I have a <div> which has all the billing details & another <div> below it which has the shipping details. There is a checkbox in between these <div>'s which says "Same as Billing Address". It is used to populate all the shipping fields from the billing fields. Well, on this particular form there are some fields which are mandatory & which I have validated by jquery validation. I have used the $("#form_id").validate().form(); statement to check validation on the click event of the checkbox. The actual problem is that after page loads, I directly click on the checkbox & submit the page, the page gets submitted & validation does not execute. If I click the submit button with the checkbox unchecked then the validation runs properly. Why is my form not being validated if I checked the checkbox? Please guys, help me out. Thanks in advance. Bhavik. I am trying to perform an AJAX lookup during form validation onsubmit. It is important that it takes place during submit, but it seems to always return true and allow the form to post even when it should not. I have tried putting the AJAX portion in its own function and having it return true or false to the validation function but also does not seem to work. Here is what the code looks like... Code: $("#companyform").submit(function() {
$.ajaxSetup({ cache: false });
$.post("ajax_v2Functions.cfm", { coNum: $("#companyNumber").val() },
function(response) {
if(response != "") {
alert("That company number is already in use by " + response);
$("#companyNumber").focus();
return false;
}
return false;
} , "html");
if($("#companyname").val() == "") {
alert("The company name cannot be left blank.");
$("#companyname").focus();
return false;
}
if($("#companyNumber").val() == "") {
alert("The company number cannot be left blank.");
$("#companyNumber").focus();
return false;
}
});
It does not work in ie7! Here is my code and my link... I have been trying to fix for 2 hours now! Please help. I tried using jquery 1.6.1, 1.5.2, min.validation, regular validation, i changed the buttons to input type="submit" and did everything else I could find but nothing works. When you click submit, it does not validate. It goes straight to my thank you page and I get a blank form in return. I do not know much jquery, just enough to know what I copy and paste and make some minimal changes. Thanks! http://www.denver-website-designer.com/quote.html <script type="text/javascript"> $().ready(function() { var erroralert = $("#quoteForm").bind("invalid-form.validate", function() { $("#erroralert"); }); }); $.metadata.setType("attr", "validate"); $.validator.addMethod("ninja", function(value) { return value == "ninja"; }, 'Can a robot spell "ninja"'); $().ready(function() { $("#quoteForm").validate({ errorContainer: $("#erroralert"), rules: { fullname: { required:true, minlength:2, }, email: { required:true, email:true, }, phone: { required:true, minlength:10, maxlength:15, }, pages: { required:true, minlength:1, maxlength:10, number:true }, whyrate: { required:true, minlength:10, }, ninja: "ninja", }, messages: { email: "Please enter a valid email address", pages: "Numeric values only", } }); }); </script> Validation is here - http://jquery.bassistance.de/validate/demo/ - JGrowl is here - http://stanlemon.net/projects/jgrowl.html - How can I get those 2 to work so that a Jgrowl window is activated when a validation from a form is called? I have 2 bucks to give for an answer in my Paypal account - I'm a newb, bare with me Thanks, Jon Hi, I'd like to use the jQuery validation plugin as seen on the following example: http://docs.jquery.com/Plugins/validation#Example But it doesn't work properly if I use inline/in-filed labels. Any help is appreciated! Rain Lover I have a simple html form with 2 text fields and submit button 1 user name 2 pwd/token and 1 checkbox 'First time user' if 'first time user' is selected then the 'Submit' button to be enabled only if the customer puts exactly 6 digits on pwd/token. if it's unchecked then the submit button to be enabled only if the customer enters 10 digits(pin_token code) please send me code will be very thankful for your help I have a simple form and am validating onchange and need a final validation onsubmit. I am displaying a message to the right of the inputbox on error. I'm trying to keep this at DOM 1 compatible and not use any framework. HTML Code: <form id = "myForm" action = "" onsubmit = "return validateForm(this);">
<table class = "table-submit" border = "0">
<tr>
<td>
Username:
</td>
<td>
<input type = "text" id = "username"
size = "30" maxlength = "30"
onchange = "validateUsername(this, 'msgUsername')" />
</td>
<td id = "msgUsername">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type = "password" id = "password"
size = "30" maxlength = "30"
onchange = "validatePassword(this, 'msgPassword')" />
</td>
<td id = "msgPassword">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</td>
</tr>
</table>
</form>
JavaScript Code: function validateUsername(myItem, myElement) {
var dom = document.getElementById(myElement);
if (myItem.value.length < 3) {
dom.innerHTML = " Username needs to be a minimum of 3 characters! ";
return false;
}
else {
dom.innerHTML = "";
return true;
}
}
function validatePassword(myItem, myElement) {
var dom = document.getElementById(myElement);
if (myItem.value.length < 5) {
dom.innerHTML = " Password needs to be a minimum of 5 characters! ";
return false;
}
else {
dom.innerHTML = "";
return true;
}
}
function validateForm (itm) {
// kind of stuck here...
}
As you may of noticed, I am a bit stuck on my validateForm() function. The code validates on each inputbox onchange event. Not sure what is the best way to go from here. I thought about doing an If for my both single input box validation, but I would need to send each parameters which is what i was trying to avoid by using this. Would like some suggestions. Hi there, I'm fairly new to Javascript, though have a good deal of experience with C# and HTML. I am having trouble getting a form to validate when it is submitted. My goal is that if a checkbox is checked (allowing the user to request more information via email) that the email address textbox should also verified to be filled out. What I have is a script in the page body, that (I believe) validates the two form elements, and the form has an onsubmit tag to run the javascript. However, everytime I run a test on the page, it submits regardless of if there is or isn't anything in the email field, with the box checked. Any guidance would be appreciated! Code: <script type="text/javascript">
function validate(){
if(document.getElementById('00N50000002tarI').value == '1' && document.getElementById('email').value == ''){
alert('Please enter your email address');
return false;
}
</script>
<form class="apply_now_form" action="test.php" id="apply_now_form" method="POST" onsubmit="return validate();">
<div class="text"><label for="email">Email</label> <input id="email" type="text" name="email" maxlength="80" /></div>
<div class="check"><font color="#006e92"><input id="00N50000002tarI" name="00N50000002tarI" type="checkbox" value="1" />*I would like to receive the latest updates via email.</font><br></div>
<div class="submit"><input class="c pill-button" type="submit" name="submit" value="Apply Now!"/></div>
</form>
Note: This form was generated by SalesForce Web-to-lead, so I cannot modify form field names, and the form is running on WordPress, in an blank page template (so there shouldn't be any WordPress code muddling with the form). Trying to create an eBay listing template with a form on it. The form will allow the buyer to enter in their ebay ID, item number, and 3 choices. Form is complete, using this javascript for validation: Code: <SCRIPT language=javascript>
function validate(){
var ebayid= document.getElementById('ebayid').value;
var itemnumber= document.getElementById('itemnumber').value;
var choice1= document.getElementById('choice1').value;
var choice2= document.getElementById('choice2').value;
var choice3= document.getElementById('choice3').value;
if (!ebayid){
alert('Ebayid is required!');
document.getElementById('ebayid').focus();
return false;
}
if (!itemnumber){
alert('Item Number is required!');
document.getElementById('itemnumber').focus();
return false;
}
if (!choice1){
alert('Choice 1 is required!');
document.getElementById('choice1').focus();
return false;
}
if (!choice2){
alert('Choice 2 is required!');
return false;
}
if (!choice3){
alert('Choice 3 is required!');
return false;
}
return true;
}
</SCRIPT>
I like this because it gives a pop up alert box (with definition) if a field is left empty. Upon success though the user is redirected off the page to a success page. I was told that this has to happen because the .php for the form to work is hosted on my site and the user needs to be redirected to my site in order for the form to work. Since this is the case, I was told I could use javascript to open up a separate window for this to happen, thus allowing the buyer to stay on the eBay listing (and to stay compliant with eBay's html/javascript policy). I have pieced together code from numerous forums to actually do this but there is one flaw. Code: <form action="http://www.mysite.com/test.php" method="post" name="testform" id="testform" onsubmit="window.open('', 'success', 'width=450,height=300,status=yes,resizable=yes,scrollbars=yes'); javascript:return validate();" rel="nofollow" target="success"/>
This code not only opens a new window but it opens the new window on any click to the submit button, even if the validation fails. How do I write this so that the new window is only opened when the validation completes all true and not when the validation returns an error/alert box? Additionally... how do I add to the javascript so that the field "ebayid" requires 6 characters and the "itemnumber" requires 12 numbers? I would also like for the form itself to erase after a successful submission to prevent the user from hitting the submit button 100's of times spamming me with email (if it's possible) Thanks Kemble ok, I am using jQuery UI http://jqueryui.com I have it all working but I wanted to style my form button I am using this: Code: <button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">A button element</span></button> that styles it, but doesn't work as I need it to be a form button?! Please help?! thanks Hi there, I am totally new to jquery and did manage to design a form and check fields on values (with a little help) with jquery. Now i also have 2 radio button options (gender), and at least 1 need to be checked. So i would like to validate this too before the form will be sent. Here is my validation now, without the radio funtion: Code: //ckeck if inputs aren't empty
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields = $('#first_step input[type=text], #first_step textarea');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='Email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
error++;
} else {
$(this).addClass('valid');
}
});
//check radio buttons
Here my radio buttons check
Does anybody know how to check if someone has filled in their gender? My radio group name ="gender". Furthermore if no radio button has been selected I would (really) like that the text within the spans, below, lights up red: Code: <div><label><span>Male</span><input type="radio" name="gender" id="Male" /><span>Female</span><input type="radio" name="gender" id="Female" /></label></div> If someone could help me out with this, u would really make my day! Tried a lot, but can't figure it out.. Thanks a lot for your time. Kind regards, Robbert |
|||||||