Question

我创建了一个按钮点击打开的弹出窗口，它有一个必填输入字段和提交按钮。当点击提交按钮弹出窗口隐藏并且它没有显示任何必填字段消息时，我想要做的就是要求单击按钮时的必填字段。

Div代码

<div id="city-popup" style="display:none;">
<div class="container">
    <form id="cityForm" name="cityForm" onsubmit="return false;">

        <div class="city-box">
        <img class="closed-city" src="/tripkar/resources/booking/images/popup-close.png">
        <div class="city-top">Add City</div>

        <div class="cityErrMsg"></div>
        <div class="city-input-feild"><p>City</p><input id="newCityName" required="required" autofocus="autofocus" class="city-txt-bx border-right" type="text"></div>



        <div class="city-button">
        <button class="add-city-btn" type="submit" onclick="javascript: return addCity();" >Add</button>
        <button class="city-cancel" type="button">Cancel</button>
        </div>
        </div>
    </form>
</div>

Javascript功能

//OK -- working fine
function addCity() {

    if ($("#cityForm")[0].checkValidity()) {

        console.log('addCity');
        return true;

    } else {
        console.log("invalid city form");
        return false;
    }
}

Answer 1

你试过这个吗？

<form id="cityForm" name="cityForm" onsubmit="addCity();">
      <div class="city-box">
        <img class="closed-city" src="/tripkar/resources/booking/images/popup-close.png" />
        <div class="city-top">Add City</div>
        <div class="cityErrMsg"></div>
        <div class="city-input-feild">
          <p>City</p>
          <input id="newCityName" required="required" autofocus="autofocus" class="city-txt-bx border-right" type="text" />
        </div>
        <div class="city-button">
          <button class="add-city-btn" type="submit">Add</button>
          <button class="city-cancel" type="button">Cancel</button>
        </div>
      </div>
    </form>

并且可能修改ur函数以在验证成功完成后隐藏弹出窗口。

function addCity() {

if ($("#cityForm")[0].checkValidity()) {

  $(this.event.target).closest("#city-popup").hide();
    return true;

} else {
    console.log("invalid city form");
    return false;
}
}

暂停Popup Div以询问HTML5验证

1 个答案: