表单字段验证似乎被忽略了

时间:2013-02-10 13:12:44

标签: javascript html5 forms

我觉得我必须错过这么简单的事情,因为这种表格字段验证方法对我来说过去很好。我相信所有文件路径都是正确的,但只要我点击提交,它就会生成一封电子邮件,无论字段内容如何。

测试网站为PortfolioPrep

     <form action="<?php echo base_url()?>" method="POST">


  <input type="hidden" name="subject" id="subject" value="Portfolio Prep From Reply">

  <div class="dot_spacer_lt_green"></div>
  <label>NAME</label><dl class="field row">
  <dt class="text"><input name="name" type="text" id="name" placeholder="Contact Name" /></dt>
  <dd class="msg"><span class="caret"></span>You filled this out wrong.</dd>
</dl>
  <label>EMAIL</label><dl class="field row">
  <dt class="text"><input name="from" type="text" id="from" placeholder="Contact Email" /></dt>
  <dd class="msg"><span class="caret"></span>You filled this out wrong.</dd>
</dl>
  <div class="dot_spacer_lt_green"></div>
  <ul class="field row">
  <li>
    <label class="radio" for="high_school">HIGH SCHOOL</label>
      <input name="radio1" type="radio" form="high_school" value="High School">

  </li>
  <li>
    <label class="radio" for="recent_graduate">RECENT GRADUATE</label>
      <input name="radio1" type="radio" form="recent_graduate" value="Recent Graduate">

  </li>
</ul>
  <div class="dot_spacer_lt_green"></div>
  <dl class="field row">
  <dt class="textarea"><textarea name="message" id="message" placeholder="Text Field"></textarea></dt>
  <dd class="error msg"><span class="caret"></span>You filled this out wrong.</dd>
</dl>
<input type="image" src="<?php echo base_url()?>img/submit.png" alt="Submit"  onClick="return validateForm()"/>
  <div class="dot_spacer_lt_green"></div>
  </form>
  </div>
  <div class="one columns"></div> 
  </div>

</div>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo base_url()?>js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="<?php echo base_url()?>js/libs/gumby.min.js"></script>
<script src="<?php echo base_url()?>js/plugins.js"></script>
<script src="<?php echo base_url()?>js/main.js"></script>
<script src="<?php echo base_url()?>js/libs/modernizr-2.0.6.min.js"></script>
<!-- end scripts-->
<!-- Change UA-XXXXX-X to be your site's ID -->


<script>

   $(document).ready(function(e) {

$("#from").blur(function(){
    if($(this).val()=='' )
    {
        $(this).css('color','#000');
        $(this).val('Email')

        }
});

$("#fron").click(function(){
    if($(this).val()=='Email' || $("#fron").val()=='Please enter a valid email.' || $("#from").val()=='Please enter your email.')
    {$(this).val('')}
});


$("#name").blur(function(){
    if($(this).val()=='')
    {$(this).css('color','#000');
        $(this).val('Contact Name')}
});

$("#name").click(function(){
    if($(this).val()=='Please enter your name.' || $(this).val()=='Contact Name')
    {$(this).val('')}
});



function validateForm()
{
    var i=0;
    if($("#name").val()=='Contact Name' || $("#name").val()=='Please enter your name.')
    {   $("#name").css('color','red');
        $("#name").val('Please enter your name.');

        i++;
    }


    if($("#from").val()=='Email' || $("#from").val()=='Please enter your email.' || $("#from").val()=='Please enter a valid email.')
    {
        $("#from").css('color','red');  
        $("#from").val('Please enter your email.');
        i++;
    }
    else
    {
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;   
        if(!filter.test($("#from").val()))
        {
            $("#from").css('color','red');
            $("#from").val('Please enter a valid email.');              
            i++;
        }

    }



    if(i>0)
    {
        return false;   
    }
    else{
            //$("#contactusform").submit();
        }   

}



    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];


    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });


  </script> 

1 个答案:

答案 0 :(得分:0)

你的Javascript中有一些拼写错误:

“#fron”需要在以下部分中成为“#from”:

$("#fron").click(function(){
    if($(this).val()=='Email' || $("#fron").val()=='Please enter a valid email.' || $("#from").val()=='Please enter your email.')
    {$(this).val('')}
});