Ajax表单-仍然无法使其与验证一起工作

Ajax form - still cannot get it working with validation

本文关键字：验证 一起 工作 表单 Ajax      更新时间：2023-09-26

我之前在这里发布过，但收到的答案没有帮助，因为它们不起作用。

我有一个使用AJAX的表单，但没有显示错误或成功消息。

有人能看到我可能忽略了什么吗？谢谢

HTML

<form id="newsletter" action="http://app.bronto.com/public/webform/process/" method="post">
                            <input type="hidden" name="fid" value="gmy3v1ej883x2lffibqv869a2e3j9" />
                            <input type="hidden" name="sid" value="37ea72cebcc05140e157208f6435c81b" />
                            <input type="hidden" name="delid" value="" />
                            <input type="hidden" name="subid" value="" />
                            <script type="text/javascript">
                            var fieldMaps = {};
                            </script>
                            <label for="nameField">Name:</label>
                            <input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />
                            <label for="emailField">Email:</label>
                            <input id="emailField" type="text" name="39821" value="" />
                            <input type="submit" value="Submit" />
                            <div id="newsletter-message" style="display:none;"></div>
</form>

JS

//ajax subscribe
$(document).ready(function(){
    $("#newsletter").submit(function(event) {
        event.preventDefault();
        alert("submitting");
        alert(data); //it doesn't alert here??
        console.log($("#newsletter").serialize());
        $.post($("#newsletter").attr("action"), $("#newsletter").serialize(), function(data){
            alert(data); //doesn't alert here either
        if(data == 'success'){
        $('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
            } else {
        $('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').css('visibility','visible');
    }
        });
        //Stop the normal POST
        return false;
    });
});

编辑

我现在已经试过了，但仍然没有成功。。

$("#newsletter").submit(function(event) {
  event.preventDefault();
  var $form = $( this ),
      ufname = $form.find( 'input[name="39829[66663]"]' ).val(),
      uemail = $form.find( 'input[name="39821"]' ).val(),
      url = $form.attr( 'action' );
  var posting = $.post( url, { name: ufname, email: uemail } );
  posting.done(function( data ) {
    $('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
  });
});

visibility和display在CSS中是两个不同的东西。

您正在使用display:none;创建显示器div，但随后您尝试使用.css('visibility','visible');使其可见，因此您最终只能使用：

<div style="display: none; visibility: visible;" id="newsletter-message">...</div>

由于display:none;的原因，它仍然不可见。

您应该将if中的操作替换为：

if(data == 'success'){
    $('#newsletter-message').html('You have been signed up.').removeClass('error').show();
} else {
    $('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').show();
}

以下是关于.show() jQuery函数的文档：http://api.jquery.com/show/

我注意到的一件小事是，名称字段使用2 id属性，这会使您的输入无效，并可能导致问题。

<input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />

也要按照@Thierry所说的去做，尽可能避免在名称字段中使用数字。

相关文章：