I'm using Firefox/Firebug, trying to step through some of the jquery.validate() callbacks.
Why do breakpoints on the below // Breakpoint lines not trigger upon clicking the submit button?
<!DOCTYPE html>
<head>
<script type="text/javascript" src="/library/scripts/lib/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.js"></script>
</head>
<body>
<form action="/" method="post">
<input data-val="true" data-val-required="This is required" id="BirthDate"
name="BirthDate" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="BirthDate"
data-valmsg-replace="true"></span>
<p>
<input type="submit" /></p>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('form').validate({
debug: true,
submitHandler: function () {
alert("Submitted!") // Breakpoint
},
invalidHandler: function (form, validator) {
alert("Invalid!") // Breakpoint
}
})
});
</script>
</body>
</html>
Update
Actually, it doesn't seem like any of the validate() options are taking effect. For example, I've added debug: true to the example above, and per the documentation it's supposed to prevent the form from being submitted, and it's still submitting the form. None of the alerts are fired either.
However, I have confirmed that the validate() function is getting called, because I can step through that -- just not the callbacks.
Unfortunately, the jquery.validate() options don't seem to function when used in combination with unobtrusive validation. Removing that reference from my file fixes the issue, but of course, breaks my unobtrusive validation.
So I ended up using another solution to hook into the validation events.
Related
So I have an HTML document with jQuery Mobile and a form element like so:
<head>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script type="text/javascript" src="lib/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<form onsubmit="myFunction()" id="myForm">
<input type="text">
</form>
<button type="submit" form="myForm">Submit</button>
<script>
function myFunction() {
//does somethign with form values
}
</script>
</body>
When the form is submitted, I want JavaScript to handle to field values (through a function called by onsubmit. I don't want to send it over to another document. That is why I have left out the action attribute. However, when I hit submit, jQuery Mobile gives me the following message: "error loading page" (see the picture). What can I do? I need the form to be submitted because I need the form to validate the fields when the button is clicked. That's why I can't just make a button that onclick calls a function that grabs the values of the fields.
Any help is much appreciated!!
Thanks in advance!
You could try preventing the event generated by submitting the form and returning false from js so that the js function gets called but the form does not get submitted
<form onsubmit="myFunction(event)" id="myForm">
<!-- ^^^^^ -> pass the event -->
<input type="text">
</form>
<button type="submit" form="myForm">Submit</button>
<script>
function myFunction(e) {
//^ get the event so we can prevent
e.preventDefault();
//does somethign with form values
return false;
}
</script>
I have a situation where I need to open a new tab to an external site when the user clicks "submit" on a form, and at the same time I need to redirect the original tab to a different page to prevent the user making multiple duplicate requests to the external site.
NOTE: I have protected against this behaviour in the back-end, I just want to use JavaScript to improve the UX where possible, removing the rendering of the option in the first place.
NOTE2: This works in Firefox, but not in Chrome or Safari.
Some example code which illustrates my issue is shown below:
<script type="text/javascript">
function testFunction(){
alert("Executing testFunction()!");
window.location.replace("http://www.google.com");
}
// uncomment this line to show that testFunction() does work when called directly
//testFunction();
</script>
<html>
<head>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction()">
</form>
</body>
</html>
When I click submit, I observe the alert popping up, but the redirect does not execute.
If I uncomment the line which calls testFunction() directly, it works as expected.
How can I get the behaviour I'm looking for?
This is what I managed to come up with after a bit of tinkering around. You can pass the click event from onclick into your handler function. If you let the event happen, it will just submit the form and prevent all following execution, that is why I stopped the original click event with preventDefault and triggered form.submit() programmatically.
Also notice how I wrapped the redirect inside a setTimeout to give time to the submit() to actually happen before the redirect.
<html>
<head>
<script type="text/javascript">
function testFunction(e) {
e.preventDefault();
e.target.parentNode.submit();
alert("Executing testFunction()!");
setTimeout(function() {
document.location.href = "http://www.google.com";
}, 0);
}
// uncomment this line to show that testFunction() does work when called directly
// testFunction();
</script>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction(event)">
</form>
</body>
</html>
I'm having problem with the following code,
The submit button is not binding to the jQuery script and the console is not printing anything. I can't figure out what the problem is..
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>
<body>
<script>
// Variable to hold request
var request;
// Bind to the submit event of our form
$("#show").submit(function(event){
console.log ("Im here");
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
</html>
You code is not working as at the time the script is interpreted and executed, the form does not exist in the DOM. Wrap your code in document-ready handler.
Specify a function to execute when the DOM is fully loaded.
Use
$(function () {
//Your code
})
OR, You can place the script tag below the form element
It is a silly mistake and the only thing that you have to change is to wrap the whole code in $(document).ready(function(){}); .
The updated code is :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
$(document).ready(function(){
var request;
$("#show").submit(function(event){
console.log ("Im here");
});
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
May be you can modify id form to "show123" and run again. if it's work => duplicate id show in page.
Glad help for you.
I have done some online research and can not find a solution. I am using the Jquery Validator plug in to validate my log in and registration forms. I have coded my registration form and it works exactly as it should. However I coded my log in the same exact way and it does not work. When I have blank fields, no message is displayed and the form is allowed to be submitted.
Sign-in.php
<html>
<head>
<link type="text/css" rel="stylesheet" href="../skin/frontend/css/styles.css" media="all">
<?php include('../js/jquery.js'); ?>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="../js/validator.js"></script>
<script src="../js/sign-in.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header"><?php include('../app/views/frontend/header.php'); ?></div>
<div class="body-container">
Sign in <br>
<form method="post" action="../account/signin/sign-in.php" id="signin">
<input type ='text'placeholder='Username' name="usernamesignin" id="usernamesignin" ><br>
<br>
<input type='text' onfocus="this.type='password'" placeholder='Password' name="passwordsignin" id="passwordsignin"><br>
<br>
<input type="submit" value="Log In">
</form>
</div>
</div>
</body>
</html>
Sign-in.js
$(document).ready(function(){
$("#signin").validate({
rules: {
usernamesignin: {
required: true
},
passwordsignin:{
required: true,
minlength:6
}
},
messages: {
username: {
required: "Please Enter A Username"
}
}
});
});
Am I missing something? This should be pretty simple.
Also I notice in my console.log that my registration page throws no errors, however my signin page shows: "Uncaught TypeError: Cannot read property 'msie' of undefined"
Not sure if that is the issue.
Thanks in advance!
Got it! Type in form action and form id.. Problem solved!
I've got your validation by doing the following:
Remove the line "<?php include('../js/jquery.js'); ?>". You shouldn't have two references to jQuery
Edit the following line to be <script src="https://code.jquery.com/jquery-1.10.2.js"></script>. You are missing the protocol https:
As per the this question, you should be able to define a URI without a protocol, but in this instance, when linking to the code.jquery.com CDN, it does not work.
I am using jQuery form plugin to submit my form. It has a file element and when I am submitting it I am getting "too much recursion" in Firefox. It looks fine in IE 8. It works fine if I submit the form without selecting any file. Any idea?
I am calling ajaxForm() method this way.
jQuery("#myForm").ajaxForm();
Code Looks like below:
HTML Form:
<form action="someaction.do" method="post" enctype="multipart/form-data" id="myForm">
To : <input type="text" value="" name="subject"/>
Attachment : <input type="file" value="" name="attachement"/>
<input type="submit" value="Send"/>
</form>
Loading the following scripts
<script language="javascript" type="text/javascript" src="../js/jquery/jquery-1.6.js"> </script>
<script language="javascript" type="text/javascript" src="../js/jquery/jquery.form.js"></script>
While form is submitting ,
jQuery("#myForm").ajaxForm()