Question

我已经看到了许多不同的方法，其中任何一个都有效。

我正在使用bootstrap。

表格会直接转到＆＃39;动作＆＃39; （我想首先验证＆＃39; onupdate＆＃39;）

SCRIPT：

[...]
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="../style.css" rel="stylesheet" type="text/css/">

<script type="text/javascript">
        function valForm() 
        {
            alert("HALOOOOOOOOO");
            var errors = 0;
            var title = document.forms["tutorial_form"]["title"].value;
            var description = document.forms["tutorial_form"]["description"].value;
            var url = document.forms["tutorial_form"]["url"].value;

            if (title == null || title == "") 
            {
                document.getElementById("title_div").style.class = "form-group has-warning";
                errors++;
            }
            if (description == null || description == "") 
            {
                document.getElementById("description_div").style.class = "form-group has-warning";
                errors++;
            }
            if (url == null || url == "") 
            {
                document.getElementById("url_div").style.class = "form-group has-warning";
                errors++;
            }
            if( errors > 0)
            {
                document.getElementById("error_container").innerHTML = "<div class="alert alert-danger" role="alert"><p><b>ERROR!</b>All the information must be fulfilled.</p></div>";
                return false;
            }

        }
    </script>
</head>

FORM：

<div class="container">
    <form name="tutorial_form" enctype="multipart/form-data" action="insert_tutorial.php" onsubmit="return valForm()" method="post">
        <div id="title_div" class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" id="title" name="title" placeholder="Title input">
        </div>
        <div id="description_div" class="form-group">
            <label for="description">Description</label>
            <textarea class="form-control" id="description" name="description" placeholder="Description" rows="5"></textarea>
        </div>
        <div id="url_div" class="form-group">
            <label for="url">Video URL</label>
            <input type="text" class="form-control" id="url" name="url" placeholder="Insert youtube url">
        </div>
        <div class="form-group">
            <label for="file">Insert image file</label>
            <input type="file" name="image" id="file">
            <p class="help-block">Select the file. Take care that it's size is no longer that 16 MB.</p>
        </div>
        <input type="submit" value="Submit" name="submit" class="btn btn-success">
    </form>
    <hr>
</div>

提前谢谢!!!

Answer 1

您在上一个if语句中出现语法错误，请将双引号更改为单引号：

document.getElementById("error_container").innerHTML = "<div class='alert alert-danger' role='alert'><p><b>ERROR!</b>All the information must be fulfilled.</p></div>";

或者你也可以逃脱它们：

"<div class=\"alert alert-danger\" role=\"alert\"><p><b>ERROR!</b>All the information must be fulfilled.</p></div>";

Javascript不适用于输入验证

1 个答案: