个人中心
gpt4 book ai didi

javascript - 当我集成 Jquery 日期选择器时，Jquery 表单验证将不起作用

转载 作者：行者123 更新时间：2023-12-02 15:21:27 25 4
gpt4 key购买 nike

当我不使用 Jquery 插件时它可以工作，但是当我使用它时，它不起作用。我已经研究了解决方案，但尚未解决。

HTML 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="en-gb" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Place Advert</title>
    <link rel="stylesheet" href="test/css/style.css" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <link href="runnable.css" rel="stylesheet" />
    <!-- Load jQuery and the validate plugin -->
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="/resources/demos/style.css" />

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


    <style type="text/css">
        .auto-style1 {
            text-align: center;
        }

        .auto-style2 {
            border-style: solid;
            border-width: 1px;
            padding: 1px 4px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="auto-style1">&nbsp;</h1>
    <h1 class="auto-style1">Sign Up</h1>
    <form action="" method="post" id="register-form" novalidate="novalidate">

        <div class="auto-style1" style="height: 67px">
            <br />
            I am looking to<br />
            <br />
            <select name="AdvertType" id='purpose'>
                <option id="AccountType" selected="selected" value="Buy">Buy</option>
                <option id="AccountType" value="Sell">Sell</option>
            </select>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>

        <div id="layer4" style="position: absolute; width: 750px; height: 366px; z-index: 4; left: 25%; top: 150px" class="auto-style2">

            <br />

            <br />
            &nbsp; Enter In A Produce Name: 
            <input name="ProduceName" type="text" />&nbsp; 
            Enter In A Produce Category: 
            <input name="ProduceCategory" type="text" />
            <br />
            <br />
            Enter In A Headline: 
            <input name="ProduceHeadline" type="text" id="EmailAddress" style="width: 290px" />
            <br />
            <br />
            Buy/Sell Price (Per KG): 
            <input name="Price" type="text" id="BusinessName" style="width: 40px" />
            Quantity Wanted/Avaliable: 
            <input name="Weight" type="text" style="width: 40px" />
            KG
            <br />
            <div id='business'>
                <br />
                From
                <input name="From" type="text" id="txtFromDate" />
                To 
            <input name="To" type="text" id="txtToDate" />
                <br />
            </div>
            <br />
            <span lang="en-gb">
                <textarea class="auto-style3" name="ProduceTags" rows="2" style="width: 547px" cols="20" id="word_count"></textarea>
                <br />
                <br />
                Total word count: <span id="display_count">0</span> words. Words left: <span id="word_left">5</span>&nbsp;
            <br />
                <br />
                <input name="Register" type="submit" value="Register" onclick="getwords()" />
    </form>
    <div id="layer7" style="position: absolute; width: 100px; height: 100px; z-index: 7; top: 680px; width: 100%; height: 40px" class="auto-style1">
        <br />
        Designed by Rajan Flora
    </div>
</body>
</html>

Java 脚本代码:

我已经添加了表单的规则，在添加 Jquery 日期插件之前它们工作得很好。添加日期插件后，表单验证不起作用。在网上进行进一步研究后，我仍然无法解决该问题并需要帮助。 

<script>

    jQuery.validator.addMethod("lettersonly", function (value, element) {
        return this.optional(element) || /^[a-z]+$/i.test(value);
    }, "Please only enter Characters");

    jQuery.validator.addMethod("spaceAllowed", function (value, element) {
        return this.optional(element) || /^[a-z , (" ")]+$/i.test(value);
    }, "Please only enter Characters");

    jQuery.validator.addMethod("numbersonly", function (value, element) {
        return this.optional(element) || /^[0-9]+$/i.test(value);
    }, "Please only enter Numbers");

    jQuery.validator.addMethod("postcode1", function (value, element) {
        return this.optional(element) || /^[A-Z]+[A-Z]+[0-9]+$/i.test(value);
    }, "Please enter a valid UK postcode and ensure there are no spaces");

</script>

<script>

    // When the browser is ready...
    $(function () {

        // Setup form validation on the #register-form element
        $("#register-form").validate({

            // Specify the validation rules
            rules: {

                ProduceName: {
                    required: true,
                },

                ProduceCategory: {
                    required: true,
                },

                ProduceHeadline: {
                    required: true,
                },

            },

            // Specify the validation error messages
            messages: {

            },

            submitHandler: function (form) {
                form.submit();
            }
        });

    });

</script>

<script>

    $(document).ready(function () {
        $("#txtFromDate").datepicker({
            numberOfMonths: 2,
            onSelect: function (selected) {
                $("#txtToDate").datepicker("option", "minDate", selected)
            }
        });
        $("#txtToDate").datepicker({
            numberOfMonths: 2,
            onSelect: function (selected) {
                $("#txtFromDate").datepicker("option", "maxDate", selected)
            }
        });
    });

</script>

最佳答案

它不起作用的原因是因为您在页面上多次包含 jQuery。通常，您只在页面上包含一个版本的 jQuery。我已经删除了您的示例中除一个之外的所有内容，然后开始工作。日期选择器逻辑似乎没问题。 

$("#txtFromDate").datepicker({
    numberOfMonths: 2,
    onSelect: function (selected) {
      $("#txtToDate").datepicker("option", "minDate", selected)
    }
  });
  $("#txtToDate").datepicker({
    numberOfMonths: 2,
    onSelect: function (selected) {
      $("#txtFromDate").datepicker("option", "maxDate", selected)
    }
  });

modified jsfiddle

关于javascript - 当我集成 Jquery 日期选择器时，Jquery 表单验证将不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34009629/

25 4 0
文章推荐： javascript - 循环遍历无序列表并对每个节点执行操作Javascript
文章推荐： clojure - 如何将序列 (var-args) 扩展为不同的项
文章推荐： xamarin - 如何以xamarin形式使用消息中心
文章推荐： javascript - KeyboardEvent.location 不返回任何内容
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com