Question

我一直在网上寻找并遵循各种教程，但我似乎无法让它发挥作用。我试图让我的Ajax表单使用validate插件进行验证。

这两个代码分开工作，但经过在线研究并尝试使用submitHandler将它们组合在一起我没有多少运气。

这是我的代码，我是jQuery和JavaScript的新手，所以除非有一个我想要的教程，否则我很难结合以前的课程。它是一个很大的联系表单，但我真正想要验证的是名称，电子邮件和消息类型字段。

由于

詹姆斯

 $('#arckocontact').validate({
 rules:{
     name: {
        required:true 
     },
     email: {
        required:true,
        email: true 
     }
 },// end rules
 messages:{
    name: {
        required: 'You must enter your name.',  
    },
    email: {
        required: 'You must supply an email address.',
        email: 'You must enter a valid email address.', 
    }
 }, //end messages
submitHandler: function(){  

var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();

var messagetype = $("input[name='messagetype']:checked").val();

var trackurl = $("input#trackurl").val();
var trackdesc = $("#trackdesc").val();

var eventdate = $("input#eventdate").val();
var eventdesc = $("#eventdesc").val();
var adrsone = $("input#adrsone").val();
var adrstwo = $("input#adrstwo").val();
var adrsthree = $("input#adrsthree").val();
var pcode = $("input#pcode").val();

var detail = $("input#subject").val();
var note = $("#note").val();

var stringone = 'Thank you, ';
var stringtwo = ' for contacting Arcko Digital, we will be in touch soon.';

$.ajax({
type: "POST",
url: "processmail.php",
data: {'name': name, 
    'email': email,
    'phone': phone,
    'messagetype': messagetype,
    'trackurl': trackurl,
    'trackdesc': trackdesc,
    'eventdate': eventdate,
    'eventdesc': eventdesc,
    'adrsone': adrsone,
    'adrstwo': adrstwo,
    'adrsthree': adrsthree,
    'pcode': pcode,
    'detail': detail,
    'note': note},
 success: function() {
$('#form').html("<div id='message'></div>");
$('#message').html("<h2>Message Submitted.</h2>")
.append(stringone, name ,stringtwo)
.hide()
.fadeIn(1500);
}
});
return false;

}   //end form ajax

});// end validate()

Answer 1

我认为这是变量error的范围。在ajax success函数中添加变量，

var stringone = 'Thank you, ';
var stringtwo = ' for contacting Arcko Digital, we will be in touch soon.';
var name = $("input#name").val();

确保尝试在开发人员（浏览器）控制台中找到错误

试试这个，

    $('#arckocontact').validate({
     rules:{
         name: {
            required:true 
         },
         email: {
            required:true,
            email: true 
         }
     },// end rules
     messages:{
        name: {
            required: 'You must enter your name.',  
        },
        email: {
            required: 'You must supply an email address.',
            email: 'You must enter a valid email address.', 
        }
     }, //end messages
    submitHandler: function(){  

    var name = $("input#name").val();
    var email = $("input#email").val();
    var phone = $("input#phone").val();

    var messagetype = $("input[name='messagetype']:checked").val();

    var trackurl = $("input#trackurl").val();
    var trackdesc = $("#trackdesc").val();

    var eventdate = $("input#eventdate").val();
    var eventdesc = $("#eventdesc").val();
    var adrsone = $("input#adrsone").val();
    var adrstwo = $("input#adrstwo").val();
    var adrsthree = $("input#adrsthree").val();
    var pcode = $("input#pcode").val();

    var detail = $("input#subject").val();
    var note = $("#note").val();

    var stringone = 'Thank you, ';
    var stringtwo = ' for contacting Arcko Digital, we will be in touch soon.';

    $.ajax({
    type: "POST",
    url: "processmail.php",
    data: {'name': name, 
        'email': email,
        'phone': phone,
        'messagetype': messagetype,
        'trackurl': trackurl,
        'trackdesc': trackdesc,
        'eventdate': eventdate,
        'eventdesc': eventdesc,
        'adrsone': adrsone,
        'adrstwo': adrstwo,
        'adrsthree': adrsthree,
        'pcode': pcode,
        'detail': detail,
        'note': note},
     success: function() {
**//Here my change** 
var stringone = 'Thank you, ';
var stringtwo = ' for contacting Arcko Digital, we will be in touch soon.';
var name = $("input#name").val();
    $('#form').html("<div id='message'></div>");
    $('#message').html("<h2>Message Submitted.</h2>")
    .append(stringone, name ,stringtwo)
    .hide()
    .fadeIn(1500);
    }
    });
    return false;

    }   //end form ajax

    });// end validate()

jQuery使用Ajax请求验证插件

1 个答案: