Question

我在表格中有一个带有id名称的文本字段。我已经添加了验证。但它不起作用

    <td>Name:</td>
    <td>
        <input type="text" id="name" class="required"/>(required)
    </td>

    $("#name").focusout(function(){
        if (!$(this).val()) {
            alert("This field is required");
            $(this).focus();
         }
    });

我在jsfiddle上有完整的代码。请检查link

Answer 1

只需确保将其放入文档准备就绪，它就可以正常工作：

$(function () {
    $("#name").focusout(function () {
        if (!$(this).val()) {
            alert("This field is required");
            $(this).focus();
        }
    });
});

jsfiddle DEMO

编辑：OP请求的完整页面：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Book Library</title>
    <style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
var count = 1;
var rating;

function addRow() {

    var myName = document.getElementById("name");
    var auther = document.getElementById("auther");
    var publish = document.getElementById("publish");
    var ratings = document.getElementsByName("rating");
    for (var i = 0; i < ratings.length; i++) {
        if (ratings[i].checked) {
            rating = ratings[i];
        }
    }
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML = count;
    row.insertCell(1).innerHTML = myName.value;
    row.insertCell(2).innerHTML = auther.value;
    row.insertCell(3).innerHTML = publish.value;
    row.insertCell(4).innerHTML = rating.value;
    count = count + 1;
}

function load() {

    console.log("Page load finished");

}
$(function() {
    $("#name").focusout(function () {
        console.log('bla');
        if (!$(this).val()) {
            alert("This field is required");
            $(this).focus();
        }
    });
});
</script>

</head><body onload="load()">
    <div id="mydata">
<b>Current data in the system ...</b>

        <table id="myTableData" border="1" style="width:100%">
            <tr id="templateRow">
                <th>ID</th>
                <th>Name</th>
                <th>Authers</th>
                <th>Published</th>
                <th>Ratings</th>
            </tr>
        </table>&nbsp;
        <br/>
    </div>
    <div id="myform">
<b>Simple form with name and age ...</b>

        <table style="width:100%">
            <tr>
                <td>Name:</td>
                <td>
                    <input type="text" id="name">
                </td>
            </tr>
            <tr>
                <td>Auther:</td>
                <td>
                    <input type="text" id="auther">
                </td>
            </tr>
            <tr>
                <td>Published:</td>
                <td>
                    <input type="date" id="publish">
                </td>
            </tr>
            <tr>
                <td>Rating:</td>
                <td>
                    <input type="radio" value="1" id="rating" name="rating">1
                    <input type="radio" value="2" id="rating2" name="rating">2
                    <input type="radio" value="3" id="rating3" name="rating">3
                    <input type="radio" value="4" id="rating4" name="rating">4
                    <input type="radio" value="5" id="rating5" name="rating">5</td>
            </tr>
        </table>
        <br>
        <input type="button" id="add" value="Add" onclick="Javascript:addRow()">
    </div>
</body>
</html>

不工作空数据的JQuery验证将插入到表行中

1 个答案: