php - 用于 Twitter-Bootstrap 联系表单的 JavaScript

Question

我正在处理我的第一个 bootstrap 元素，但我无法找到关于我想要实现的具体目标的帮助。我认为它比我想象的要简单，但我不擅长 javascript - 这是我的主要问题。

我要实现的目标:

用户会看到 4 个字段 - 姓名、电子邮件、主题、正文 和 reCaptcha。对我来说很难的部分是联系表格的客户端检查。各个领域都需要。除非所有字段都满足要求，否则我不希望启用提交按钮。如果他们在离开时不满足每个字段的要求，它将在该字段中添加 id="inputError"。

一旦满足所有要求，它将从按钮输入中删除 disabled="disabled"字段，并从按钮中删除 'disabled' 类。我的问题是在表单加载时，将禁用类作为最后一个类对象注入(inject)并将 disabled="disabled"添加到字符串中。

约束:

• 姓名 min(3) max(32)
• 电子邮件 min(8) max(64) + 正确的电子邮件格式
• 主题 min(3) max(32)
• body 最小(20)最大(420)
• 我真的不在乎他们是否填写了验证码以启用提交按钮，如果他们错过了验证码，那就是他们的错。

表单的原始 HTML:

    <form action="" method="post" class="contact">
    <fieldset>
        <legend class="span8">Send us an email!</legend>
            <p class="email-desc">
                Send us ideas, feedback, job requests or anything that you want to tell us. We want to provide games where you have a voice. We're as open as the platform that we develop for and we expect it to remain that way. 
            </p>
        <label>Name</label>
        <input type="text" class="input-xlarge" name="name" placeholder="John Doe" autofocus>

        <label>Email</label>
        <input type="text" class="input-xlarge" name="email" placeholder="email@domain.com">

        <label>Subject</label>
        <input type="text" class="input-xxlarge" name="subject" placeholder="I couldn't think of a better subject...">

        <label>Body</label>

        <textarea class="email-form" name="body"></textarea>

        <div class="row">
            <div class="submit-row">
                <div class="pull-left">
                    <!-- reCaptcha --> 
                </div>
                <button type="submit" class="btn btn-large btn-primary submit-email" id="submit">Submit</button>
            </div>
        </div>
      </fieldset>
    </form>

求助!如果你能用 javascript 进一步帮助我，我愿意捐款。

我会更新可以找到联系表格的网站； http://www.geekdgames.com/contact.php

Answer 1

我建议使用 vanadiumjs 进行客户端验证。

https://github.com/lambder/Vanadium

您的输入字段看起来像

<input name="firstname" id="fname" class=":required :alpha :wait;1000 
    :min_length;5 input-xxlarge" type="text">

<input name="email" class=":required :email :wait;1000 
    :min_length;5 input-xxlarge" type="text">

等等。

如果验证失败，vanadium 会自动禁用提交。在验证码的情况下，您可以使用 ajax 来验证它。vanadium 中的 ajax 是有问题的。

<input type=text id=captcha class=':required;' name=captcha>

$("#captcha").change(function()
{
    $.ajax({

            url:'/verifycpatcha/?captcha='+ $('#captcha').val()           
          }).done(function(data)
            {
                if(data=='0')
                {
                    alert("Wrong");
                    $('#captcha').val('');
                    $('#captcha').focus();
                }
            });
});

如果错误，这将清除验证码字段，并且 vanidium 会阻止表单提交。

但是，不推荐客户端验证，因为用户可以随时禁用 javascript。