0

我正在做我的第一个引导项目，但我无法找到关于我想要实现的具体目标的帮助。我认为它比我想象的要简单，但我对 javascript 很糟糕——这是我的大部分问题。

我想要达到的目标：

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

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

约束：

  • 名称 min(3) max(32)
  • 电子邮件 min(8) max(64) + 正确的电子邮件格式
  • 主题 min(3) max(32)
  • 身体最小（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

4

1 回答 1

1

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

https://github.com/lambder/钒

您的输入字段看起来像

<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。

于 2013-08-08T05:12:55.860 回答