以下是我用来尝试提交表单的代码..我在firebug中收到以下错误:
$(“#submit”)。ajaxForm不是函数
但是,表单会提交但是转到test.php页面并且不显示成功div ..
非常感谢任何帮助。
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#submit').ajaxForm(function() {
$('form#submit').fadeOut(function(){$('div.success').fadeIn();});
});
});
</script>
<script src="jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen">
<style>
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:360px;
padding:12px;
}
.error{
margin:0 auto;
width:360px;
padding:12px;
}
.success{
margin:0 auto;
width:360px;
padding:12px;
}
/* ----------- stylized ----------- */
#errored{
border:solid 2px #FAB6C2;
background:#FDE4E1;
font-weight: bold;
}
#successStyle{
border:solid 2px #C0D27B;
background:#E6EFC2;
font-weight: bold;
}
#stylized{
border:solid 2px #EE901F;
background:#FAB766;
}
.LV_valid {
color:#00CC00;
}
.LV_invalid {
color:#CC0000;
}
.LV_validation_message{
font-weight:bold;
margin:0 0 0 5px;
}
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active,
.fieldWithErrors input.LV_valid_field,
.fieldWithErrors textarea.LV_valid_field {
border: 1px solid #00CC00;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
.fieldWithErrors input.LV_invalid_field,
.fieldWithErrors textarea.LV_invalid_field {
border: 1px solid #CC0000;
}
</style>
<style type="text/css" media="screen">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
padding: 40px;
}
h1 {
margin-top: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 20px;
clear: both;
}
label {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
display: block;
margin-bottom: 3px;
clear: both;
}
</style>
</head>
<body>
<form id="submit" method="post" action="test.php">
<br>
<div id="stylized" class="myform">
<ul>
<li><label>Name:</label><input type="text" id="name" name="name" size="40"/></li>
<script type='text/javascript'>
var name = new LiveValidation('name');
name.add(Validate.Presence, { failureMessage: ' Name required!' });
name.add( Validate.Length, { minimum: 2 } );
</script>
<li><label>Email:</label><input type="text" id="email" name="email" size="40"/></li>
<script type='text/javascript'>
var email = new LiveValidation('email');
email.add(Validate.Presence, { failureMessage: ' Email required!' });
email.add( Validate.Email );
</script>
<li><label>Password:</label><input type="text" id="password" name="password" size="40"/></li>
<script type='text/javascript'>
var password = new LiveValidation('password');
password.add(Validate.Presence, { failureMessage: ' Password required!' });
password.add( Validate.Length, { minimum: 6 } );
</script>
<li><label>Verify Password:</label><input type="text" id="verifypassword" name="verifypassword" size="40"/></li>
<script type='text/javascript'>
var verifypassword = new LiveValidation('verifypassword');
verifypassword.add(Validate.Presence, { failureMessage: ' Password required!' });
verifypassword.add( Validate.Length, { minimum: 6 } );
verifypassword.add( Validate.Confirmation, { match: 'password' } );
</script>
<li><label>Company:</label><input type="text" id="custom1" name="custom1" size="40"/></li>
<script type='text/javascript'>
var custom1 = new LiveValidation('custom1');
custom1.add(Validate.Presence, { failureMessage: ' Company required!' });
</script>
<li><label>Country:</label><input type="text" id="custom2" name="custom2" size="40"/></li>
<script type='text/javascript'>
var custom2 = new LiveValidation('custom2');
custom2.add(Validate.Presence, { failureMessage: ' Country required!' });
</script>
<li><label>Job Title:</label><input type="text" id="custom3" name="custom3" size="40"/></li>
<script type='text/javascript'>
var custom3 = new LiveValidation('custom3');
custom3.add(Validate.Presence, { failureMessage: ' Job Title required!' });
</script>
<li><label>Telephone:</label><input type="text" id="custom4" name="custom4" size="40"/></li>
<script type='text/javascript'>
var custom4 = new LiveValidation('custom4');
custom4.add(Validate.Presence, { failureMessage: ' Telephone required!' });
</script>
<li><label>Address:</label><input type="text" id="custom5" name="custom5" size="40"/></li>
<script type='text/javascript'>
var custom5 = new LiveValidation('custom5');
custom5.add(Validate.Presence, { failureMessage: ' Address required!' });
</script>
<li><label>City:</label><input type="text" id="custom6" name="custom6" size="40"/></li>
<script type='text/javascript'>
var custom6 = new LiveValidation('custom6');
custom6.add(Validate.Presence, { failureMessage: ' City required!' });
</script>
<li><label>State:</label><input type="text" id="custom7" name="custom7" size="40"/></li>
<script type='text/javascript'>
var custom7 = new LiveValidation('custom7');
custom7.add(Validate.Presence, { failureMessage: ' State required!' });
</script>
<li><label>Postal Code:</label><input type="text" id="custom8" name="custom8" size="40"/></li>
<script type='text/javascript'>
var custom8 = new LiveValidation('custom8');
custom8.add(Validate.Presence, { failureMessage: ' Postal Code required!' });
</script>
<li><label>What programs and genres are you interested in?</label><input type="text" id="custom9" name="custom9" size="40"/></li>
<script type='text/javascript'>
var custom9 = new LiveValidation('custom9');
custom9.add(Validate.Presence, { failureMessage: ' Interest required!' });
</script>
<li>
<label>Terms and Conditions:</label><textarea name="terms" readonly='readonly' cols='40' rows='6'>Terms of Use</textarea>
</li>
<li>
<label> I have read and agree to the terms and conditions.</label><input name="custom10" id="custom10" type="checkbox" />
</li>
<li>
<button type="submit">Register</button>
</li>
</ul>
</div>
</form>
<div class="success" style="display: none;">
<div id="successStyle">
Thank you for submitting your request.<br><br>It will be reviewed shortly and a confirmation e-mail sent to you.
</div>
</body>
</html>
答案 0 :(得分:0)
如果ajax提交不起作用,表单将作为非ajax提交。
确保您已包含必要的jquery.js以及该函数所需的所有插件。
另外,请检查以下代码是否存在语法错误等:
$('#submit').ajaxForm(function() {
$('form#submit').fadeOut(function(){$('div.success').fadeIn();});
});
我会首先评论$('form#submit')...
部分。