内联活动JavaScript表单验证 [英] Inline Active Javascript Form Validation

问题描述

我正在处理联系表单，并且需要一些内联javascript表单验证.我已经有php验证，但是我想进行一些有效的表单验证，例如 http://twitter.com/signup.我希望它在输入后显示和隐藏p标记.这是我的html代码.

I am working on a contact form and need some inline javascript form validation. I already have php validation, but I would like to have some active form validation like at http://twitter.com/signup. I would like it to show and hide the p tags after the input. Here is my html code.

<form class="contact" method="POST" enctype="multipart/form-data" action="validate.php">


  <label for="fname">First Name*<br /></label>
  <input type="text" id="fname" style="font-family: Gochi Hand;" name="fname" placeholder="First" autofocus required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">First Name Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A First Name is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your First Name.</p>
    </div>
  <br /><br />

  <label for="lname">Last Name*<br /></label>
  <input type="text" id="lname" style="font-family: Gochi Hand;" name="lname" placeholder="Last" required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice" style="color:green; ">Last Name Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A Last Name is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Last Name.</p>
    </div>

  <br /><br />

  <label for="email">Email Address*<br /></label>
  <input type="email" name="email" style="font-family: Gochi Hand;" id="email" placeholder="[e-mail]" pattern="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">Email Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A Email is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Email.</p>
    </div>

  <br /><br />

  <label for="url">Website<br /></label>
  <input type="url" name="url" id="url" style="font-family: Gochi Hand;" placeholder="http://website.com"  pattern="^(http|https)://.+(.[a-zA-Z])$" autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">URL Looks Good.</p> 
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your URL.</p>
    </div>

  <br /><br />


  <label for="age">Age*<br /></label>
  <input type="text" size="3" id="age" name="age" style="font-family: Gochi Hand;" required class="age" required placeholder="Age" pattern="^\d+$" autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">Age Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">An Age is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Age.</p>
    </div>

  <br /><br />

  <label for="comments">Comments*<br /></label>
  <textarea style="font-family: Gochi Hand;" required id="comments" name="comments" cols="30" rows="10"></textarea>

  <br /><br />

  <input type="hidden" value="True" name="go" id="go" />

  <input style="color:red;" type="submit" class="submit" value="Send!" />
  </form>

任何建议或帮助都是值得的.

any suggestions or help would be worth a ton.

推荐答案

以下是示例表格

html

<form id='test'>
Name * <input id="name" type="text"><span id='errName' class='error'>This is a required field</span>
</form>

css

.error{
  display:none;
  color:red;
}

javascript

javascript

document.getElementById('test').onsubmit=function(){
  if(document.getElementById('name').value=''){
    document.getElementById('errName').style.display='block';
    return false;
  }
  else{
    return true;
  }
}

这是一个非常简单的示例，并且有不同的处理方法.例如，您可以仅在出现错误时附加一个元素，而不是隐藏一个元素.另外，当input元素上存在onblur事件时，您可以添加另一个函数来检查有效值.

This is a very simple example and there are different ways to it. For example you could just append an element if there is an error instead of having one hid. Also, you can add another function to check for valid value when there is an onblur event on the input elements.

这篇关于内联活动JavaScript表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！