站长资源网络编程

简单实用的反馈表单无刷新提交带验证

整理:jimmy2026/8/6浏览2
简介js文件可以查看源码 XML/HTML Code 复制代码 代码如下:
    js文件可以查看源码

    XML/HTML Code
    复制代码 代码如下:
    <div id="preview"></div>
    <div id="formbox">
    <form name="form" id="form" action="submit.php" method="post">
    <ul id="ngothastyle3" >
    <li>
    <label>Name</label>
    <input type="text" name="name" class="" maxlength="40" />
    </li>
    <li>
    <label>Email</label>
    <input type="text" name="email" class="" maxlength="100" />
    </li>
    <li>
    <label>Message</label>
    <textarea name="message" rows="5" cols="45" class=""></textarea>
    </li>
    <li>
    <label> </label>
    <input type="submit" value="Submit">
    </li>
    </ul>
    </form>
    </div>

    JavaScript Code
    复制代码 代码如下:
    <script type="text/javascript">
    $('document').ready(function(){

    $('#form').validate({
    rules:{
    "name":{
    required:true,
    maxlength:40
    },

    "email":{
    required:true,
    email:true,
    maxlength:100
    },

    "message":{
    required:true
    }},

    messages:{
    "name":{
    required:"This field is required"
    },

    "email":{
    required:"This field is required",
    email:"Please enter a valid email address"
    },

    "message":{
    required:"This field is required"
    }},

    submitHandler: function(form){
    $(form).ajaxSubmit({
    target: '#preview',
    success: function() {
    $('#formbox').slideUp('fast');
    }
    });

    }

    })

    });
    </script>