Fatal编程技术网
  • javascript/
  • Javascript Jquery表单验证获胜'；集成Jquery日期选择器时无法工作

Javascript Jquery表单验证获胜'；集成Jquery日期选择器时无法工作

javascript

Javascript Jquery表单验证获胜'；集成Jquery日期选择器时无法工作,javascript,Javascript,当我不使用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

当我不使用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>


地方广告
.auto-style1{
文本对齐：居中；
}
.auto-style2{
边框样式：实心；
边框宽度：1px；
填充：1px4px；
文本对齐：居中；
}
注册


我正在寻找



购买
卖


















输入产品名称：
在产品类别中输入：




在标题中输入：




买卖价格（每千克）：
需要/可用数量：
公斤




从…起
到








总字数：0个字。剩余单词：5






由拉詹·弗洛拉设计
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.validator.addMethod（“lettersonly”），函数（值，元素）{
返回此.optional（元素）| |/^[a-z]+$/i.test（值）；
}，“请仅输入字符”）；
jQuery.validator.addMethod（“spaceAllowed”），函数（值，元素）{
返回此.optional（element）| |/^[a-z，（“”）]+$/i.test（value）；
}，“请仅输入字符”）；
addMethod（“numbersonly”，函数（值，元素）{
返回此.optional（元素）| |/^[0-9]+$/i.test（值）；
}，“请只输入数字”）；
jQuery.validator.addMethod（“postcode1”，函数（值，元素）{
返回此.optional（element）| |/^[A-Z]+[A-Z]+[0-9]+$/i.test（value）；
}，“请输入有效的英国邮政编码并确保没有空格”）；
//当浏览器准备就绪时。。。
$（函数（）{
//在#注册表表单元素上设置表单验证
$（“#登记表”）。验证({
//指定验证规则
规则：{
产品名称：{
要求：正确，
},
产品类别：{
要求：正确，
},
产品标题：{
要求：正确，
},
},
//指定验证错误消息
信息：{
},
submitHandler:函数（表单）{
表单提交（）；
}
});
});
$（文档）.ready（函数（）{
$（“#txtFromDate”）.datepicker({
月数：2，
onSelect：功能（已选择）{
$（“#txtToDate”）.datepicker（“选项”，“minDate”，选中）
}
});
$（“#txtToDate”）.datepicker({
月数：2，
onSelect：功能（已选择）{
$（“#txtFromDate”）.datepicker（“选项”，“maxDate”，选中）
}
});
});
它不起作用的原因是您在页面上多次包含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)
    }
  });

添加日期插件和页面加载时是否存在Javascript错误？通常错误会破坏页面上的所有Javascript。请清理/缩进代码，并添加
JQuery
和
datepicker
标记+如果你找不到，一切都很好，直到我添加了我从网站上获得的实际脚本代码和库。我在一个单独的文件中运行了代码，效果很好