必需选项不适用于本地主机

Question

所有必填字段在本地运行良好，但当我尝试从本地主机运行同一页面时 - 使用 jQuery 创建的字段不检查输入是否已填写。 select 中的必需选项在两种情况下都可以正常工作。

<html>
    <head>
        <title>Submit your data</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link href="style.css"  rel="stylesheet">
        <script src="jquery+ajax.js"></script>
    </head>
    <body>
    <div id="mainform">


 <h1>Insert your data</h1>
        <form method="post" action="add_product.php">
            <input type="hidden" name="submitted" value="true" required/>

            <fieldset id="product_list">
                <legend>New Product</legend>
                <label>SKU:<input  name="sku" required/></label>
                <label>Name:<input  name="name" required/></label>
                <label>Price:<input  name="price" required/></label>
                <label>Product Type</label>

                <select id="Product_Type" required>
                    <option value="" selected>Select product type</option>
                    <option value="Dvd" >DVD</option>
                    <option value="Book">Book</option>
                    <option value="Furniture">Furniture</option>
                </select>

            </fieldset>
    </div>
    <br  />
    <input type="submit" id="submit" value="Add"/>

    <div id='result'></div>
    <button id="back" class="back" onclick="location.href='index.html';">Go Back</button>
    </body>
    <!-- onClick="window.location.reload()" -->
    </html>

使用 jQuery 创建表单，此处生成的字段不适用于本地主机

    var $input_DVD = $('<input id="dvd" placeholder="Size in Mb" required/>');
var $input_Book = $('<input id="book" placeholder="Weight in Kg" required/>');
var $input_FurnitureHeight = $('<input id="furnh" placeholder="Height in Cm" required/>');
var $input_FurnitureWidth = $('<input id="furnw"  placeholder="Width in Cm" required/>');
var $input_FurnitureLength = $('<input id="furnl" placeholder="Length in Cm" required/>');


$(document).ready(function() {
    $('select#Product_Type').on('change', function() {
        $('#container').remove();

        var val = $(this).val()
        $container = $('<fieldset id="container" class="inner" ></fieldset>');

        if (val == "Dvd")$input_DVD.appendTo($container);
        if (val == "Book") $input_Book.appendTo($container);
        if (val == "Furniture"){
            $input_FurnitureHeight.appendTo($container);
            $input_FurnitureWidth.appendTo($container);
            $input_FurnitureLength.appendTo($container);
        }
        $container.insertAfter($(this)).val();
    })
});

Answer 1

请确保您在本地系统中有互联网连接，因为您没有使用本地 jquery 库文件，并检查浏览器控制台是否显示任何错误..

var $input_DVD = $('<input id="dvd" placeholder="Size in Mb" required/>');
var $input_Book = $('<input id="book" placeholder="Weight in Kg" required/>');
var $input_FurnitureHeight = $('<input id="furnh" placeholder="Height in Cm" required/>');
var $input_FurnitureWidth = $('<input id="furnw"  placeholder="Width in Cm" required/>');
var $input_FurnitureLength = $('<input id="furnl" placeholder="Length in Cm" required/>');
$(document).ready(function() {
    $('select#Product_Type').on('change', function() {
        $('#container').remove();

        var val = $(this).val()
        $container = $('<fieldset id="container" class="inner" ></fieldset>');

        if (val == "Dvd")$input_DVD.appendTo($container);
        if (val == "Book") $input_Book.appendTo($container);
        if (val == "Furniture"){
            $input_FurnitureHeight.appendTo($container);
            $input_FurnitureWidth.appendTo($container);
            $input_FurnitureLength.appendTo($container);
        }
        $container.insertAfter($(this)).val();
    })
});

<html>
    <head>
        <title>Submit your data</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link href="style.css"  rel="stylesheet">
        <script src="jquery+ajax.js"></script>
    </head>
    <body>
    <div id="mainform">


 <h1>Insert your data</h1>
        <form method="post" action="add_product.php">
            <input type="hidden" name="submitted" value="true" required/>

            <fieldset id="product_list">
                <legend>New Product</legend>
                <label>SKU:<input  name="sku" required/></label>
                <label>Name:<input  name="name" required/></label>
                <label>Price:<input  name="price" required/></label>
                <label>Product Type</label>

                <select id="Product_Type" required>
                    <option value="" selected>Select product type</option>
                    <option value="Dvd" >DVD</option>
                    <option value="Book">Book</option>
                    <option value="Furniture">Furniture</option>
                </select>

            </fieldset>
    </div>
    <br  />
    <input type="submit" id="submit" value="Add"/>

    <div id='result'></div>
    <button id="back" class="back" onclick="location.href='index.html';">Go Back</button>
    </body>
    <!-- onClick="window.location.reload()" -->
    </html>

必需选项不适用于本地主机

Required option not working on localhost

javascript

jquery

html

required