jQuery form Validation error, no response - javascript

<!DOCTYPE html>
<html>
<head>
<title>
jquery validation
</title>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#frmName').validate({
rules:{
field1:{
required:true,
lettersonly:true
},
field2:{
required:true,
email:true
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false;}
});
});
</script>
<form name="frmName" id="frmName" action="" method="post">
Enter name:<input type="text" name="field1"></br>
Enter E-Mail:<input type="text" name="field2"><br/>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
I have a little problem with jQuery Validation plugin.
Why is this validation is not working? Is this because of the wrong library I linked to? I don't really understand whats wrong, so I decided to paste the whole validate script. Please take a look at my code.

Your code working fine here
It seems.you forget to add Jquery library
Add bellow line top of the others libraries
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

Related

Input box alerts the text by clicking a button (Really new to JQuery)

JQuery Part
I just started using JQuery. First I wanted to create a a input box with an button that alerts the text that is in that box. This is the way I wanted to do that.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
That is the code in the html body part. Here im not sure if I have to declare the id with an # or not. I tried both but It didnt work for both.
My Code
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> $(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); }); </script>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button> </body>
</html>
I am really new to JavaScript and Jquery. When I run this code there are no errors or something like that in the console just blank. The Button and Input field are on the website but when I enter something and click the button after that nothing happens. That´s why im sure there are some mistakes in that code.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="term" type="text" value="enter your search" />
<button id="hit" type="button" name="Button">Search</button>
here has worked, do you have imported a jquery library?
Resolution with your code:
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); });
</script>
</body>
</html>

Why am I not getting a response from serialize()?

I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>

can't ajax post a from with firefox

I want to post a from using jQuery ajax without page reloading, it works fine in Chrome but not works in Firefox 6.0. Below is my code
<html>
<head>
<script type="text/javascript">
function save()
{
$('#myForm').submit(function(event){
event.preventDefault();
$.ajax({
type:'POST',
url:'save.php',
data:$('#myForm').serialize(),
success:function(data)
{
alert('form submitted');
},
error:function()
{
alert('unable to submit');
}
});
});
}
</script>
</head>
<body>
<form id="myForm" action=''>
<input type="text" name="firstName">
<input type="text" name="lastName">
<input type="submit" id="submitForm" onclick="save(myForm);">
</form>
<body>
</html>
Any help would be much appreciated.
You must have a cached version of jQuery in your FF cache, because I do not see you including jQuery anywhere on the page.
Add above other scripts in the head section:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
Include jQuery library in your header section.
I would suggest you get rid of the onclick and save() and just use the jQuery submit handler
<!-- make sure you have doctype -->
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#myForm').submit(function(event){
event.preventDefault();
$.ajax({
type:'POST',
url:'save.php',
data:$('#myForm').serialize(),
success:function(data)
{
alert('form submitted');
},
error:function()
{
alert('unable to submit');
}
});
});
});
</script>
</head>
<body>
<form id="myForm" action=''>
<input type="text" name="firstName">
<input type="text" name="lastName">
<input type="submit" id="submitForm"><!-- remove onclick -->
</form>
<body>
</html>
Be sure to include jQuery.js also

simple jquery does not work [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
When should I use jQuery's document.ready function?
(8 answers)
Closed 9 years ago.
I am new to JavaScript and jquery and want to check fields in a form before submitting. But even a simple example taken from How to do something before on submit? does not work. I do not ge an alert in Firefox and do not see any errors in the webdeveloper's console. See the code:
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
</script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" />
</form>
</body>
</html>
And of course there is "jquery.min.js" in the same folder.
You need to add the script in a dom ready handler
jQuery(function () {
$('#myForm').submit(function () {
alert('Handler for .submit() called.');
return false;
});
})
When the js code is executed, the html element has to already exists. To delay the code strat, use document.ready as above:
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
});
</script>
Note: the syntax $('#myForm').submit(function() { is deprecated and should probably be replaced by $(document).on("submit", "#myForm", function() { or something similar :)
EDIT: also for what you ask, see javascript documentation about e.preventDefault(), this could also be useful for what you want :)
This will work too, setting script after element already added to the DOM:
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" />
</form>
<script type="text/javascript">
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
</script>
</body>
you should try e.preventDefault(); instead of return false; E.g
$(function() { $('#myForm').submit(function(e) { e.preventDefault(); alert('Handler for .submit called.'); }); });
because some times return false; may not be effective on some codes on jquery
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
});
</script>
</head>
<body>
<form id="myForm" action="foo.php" method="get">
<input type="text" value="" />
<input type="submit" value="submit form" onsubmit="submit" />
</form>
</body>
</html>
demo: http://jsfiddle.net/kapil_dev/6Tf7Y/

JQuery validation only works for the first element in the form submitted. [intend to validate all]

The JQuery validation only works for the first element in the form submitted, Validation won't check
for the 2nd one. Need to find out what is missing. Swap the input for text1 and date2, validation still
works for the first one.
<!DOCTYPE HTML>
<html lang="en-US">
<head><title>
</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://jquery-multifile-plugin.googlecode.com/svn-history/r16/trunk/jquery.MetaData.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function () {
$("#form1").validate();
$(".date").datepicker({
changeYear: true,
dateFormat: 'dd/mm/yy',
minDate: new Date('1990/01/01'),
maxDate: '30Y'
});
});
function test() {
alert(document.getElementById("datetext").getAttribute("must"));
}
</script>
</head>
<body>
<form method="post" action="WebForm1.aspx" id="form1">
Text:<font color="red">* </font><input id="Text1" class="lvl {required:true,messages:{required:'blank not allowed.'}}" /><br />
Select Date2:<font color="red">* </font><input id="date2" class="date {required:true,messages:{required:'Required:Need to enter 2 date.'}}" readonly="true" /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Be sure to include a name attribute to your inputs. I believe it uses the name attribute to build its list of validation fields and since you haven't specified a name attribute, jquery validation thinks the second field is the same name as the first.
For example, <input id="Text1" name="Text1" />

Categories