0

我有一个简单的联系表单，在提交时发布到 MySql，我试图在提交表单之前在客户端进行验证（我将在客户端工作后实施服务器端验证）。出于某种原因，当我提交它发布到数据库但没有启动客户端验证的表单时。任何帮助，将不胜感激。

这是 HTML（twitter 引导程序）代码：

<form action="/contact.php" method="post" id="contactUs">
    <div class="control-group">
       <label class="control-label" for="Name">NAME<sup>*</sup></label>
       <div class="controls">
         <input type="text" class="span4" name="name" placeholder="Name" id="name">
         <span class="help-block"></span> 
        </div>
    </div>
    <div class="control-group">
       <label class="control-label" for="Email">EMAIL<sup>*</sup></label>
       <div class="controls">
         <input type="text" class="span4" name="email" placeholder="Email" id="email">
         <span class="help-block"></span> 
       </div>
    </div>
    <div class="control-group">
       <label class="control-label" for="Subject">Subject<sup>*</sup></label>
       <div class="controls">
         <input type="text" class="span4" name="subject" placeholder="Subject" id="subject">
         <span class="help-block"></span>
       </div>
     </div>
     <div class="control-group">
        <label for="textarea" class="control-label" for="Comment">COMMENTS<sup>*</sup></label>
        <div class="controls">
          <textarea rows="5" class="span6" name="comments" id="message"></textarea>
          <span class="help-block"></span>
        </div>
      </div>
      <div class="control-group form-button-offset">
      <input type="submit" class="btn btn-large btn-primary pull-right" value="Send Message" />
     </div>
      <input type="hidden" name="redirect" value="contact_us.html" />


<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/contactUs.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>

下面是 contactUs.js 的代码：

$(document).ready(function(){
$('#contactUs').validate({
    rules: {
        name: {
            minlength: 4,
            required: true
        },
        email: {
            required: true,
            email: true,
        },
        subject: {
            minlength: 5,
            required: true
        },
        submission_Reason: {
            minlength: 5,
            required: true
        },
        comments: {
            minlength: 8,
            required: true,
        }
    },
    messages: {
        name: "Please enter your first and last name",
        email: "Please enter a valid email address",
        subject: "Please enter a subject",
        comments: "Please enter a short message",
    },
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('error').addClass('success');
    },
    success: function (label) {
        $(label).closest('form').find('.valid').removeClass("invalid");
    },
    errorPlacement: function (error, element) {
        element.closest('.control-group').find('.help-block').html(error.text());
    }
});
};

和 PHP contact.php 文件：

    <?php

$con=mysqli_connect("host","username","password","dbname");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$sql="INSERT INTO contactUs (name, email, subject, comments)
VALUES
('$_POST[name]','$_POST[email]','$_POST[subject]','$_POST[comments]')";

$sql="INSERT INTO contactUs (`date_created`) VALUES (now())";

if (!mysqli_query($con,$sql))
  {
  die('Error: ' . mysqli_error($con));
  }
echo "Your form has been received, Thank you!";

mysqli_close($con);

?>

当我提交表单时，不会触发客户端验证，结果是：

  • 表单被提交并发布到数据库
  • 我得到：您的表格已收到，谢谢！

我究竟做错了什么？为什么没有发生验证？

4

1 回答 1

0

尝试这个

$.validator.setDefaults(
{
    submitHandler: function() { submit(); },
    showErrors: function(map, list) 
    {
        this.currentElements.parents('label:first, .controls:first').find('.error').remove();
        this.currentElements.parents('.control-group:first').removeClass('error');

        $.each(list, function(index, error) 
        {
            var ee = $(error.element);
            var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first');

            ee.parents('.control-group:first').addClass('error');
            eep.find('.error').remove();
            eep.append('<p class="error help-block"><span class="label label-important">' + error.message + '</span></p>');
        });
        //refreshScrollers();
    }
});

$.validator.setDefaults(
{
    submitHandler: function() { submit(); },
    showErrors: function(map, list) 
    {
        this.currentElements.parents('label:first, .controls:first').find('.error').remove();
        this.currentElements.parents('.control-group:first').removeClass('error');

        $.each(list, function(index, error) 
        {
            var ee = $(error.element);
            var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first');

            ee.parents('.control-group:first').addClass('error');
            eep.find('.error').remove();
            eep.append('<p class="error help-block"><span class="label label-important">' + error.message + '</span></p>');
        });
        //refreshScrollers();
    }
});

$(function()
{
    // validate signup form on keyup and submit
    $("#validateSubmitForm").validate({
        rules: {
        name: {
            minlength: 4,
            required: true
        },
        email: {
            required: true,
            email: true,
        },
        subject: {
            minlength: 5,
            required: true
        },
        submission_Reason: {
            minlength: 5,
            required: true
        },
        comments: {
            minlength: 8,
            required: true,
        }
        },
        messages: {
        name: "Please enter your first and last name",
        email: "Please enter a valid email address",
        subject: "Please enter a subject",
        comments: "Please enter a short message"
    });

    // propose username by combining first- and lastname
    $("#username").focus(function() {
        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        if(firstname && lastname && !this.value) {
            this.value = firstname + "." + lastname;
        }
    });

    //code to hide topic selection, disable for demo
    var newsletter = $("#newsletter");
    // newsletter topics are optional, hide at first
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // show when newsletter is checked
    newsletter.click(function() {
        topics[this.checked ? "removeClass" : "addClass"]("gray");
        topicInputs.attr("disabled", !this.checked);
    });
});
于 2013-08-25T17:44:22.607 回答