jQuery - 验证是否已选择两个不同的<li>。</li>

Question

对于在线预订系统，我让用户通过邮政编码放入取件和目的地。问题是用户可以搜索地址，例如'LE115GU'，它会显示多个结果。目前，用户无需选择地址即可转到预订表单的下一页，因此不会将地址写入数据库。我基本上需要在那里进行验证，这样如果用户没有为取件或目的地选择li-addr-res，就会提示他们。

如果用户搜索邮政编码会发生这种情况： -

类似于： -

if(nextPgeNum == 2) { 

 // CODE // if title="Dropoff" and no li-addr-res is selected

 // or if title="Pickup" and no li-addr-res is selected

 // alert("You must select a pickup or dropoff address")

}

我只是不太确定如何实现这一点，所以任何帮助都会受到高度赞赏。

以下是dropoff的HTML代码。

 <div id="cp-row-wrapper-dp" class="row-wrapper row-wrapper-addr-search" title="Dropoff">

    <div class="div-search-label left">

        <p class="a-topheader-infotext">

    <strong>Destination</strong>

    </p>

</div>

<div class="div-search-content div-content left div-subrow-style ui-corner-all">

    <input id="txt-dropoff-hn" class="input-txt-xxxsml input-txt-highlight addr-ho-input left" type="text" value="" maxlength="5" size="4" tabindex="3" name="txt-dropoff-hn">

    <input id="txt-dropoff" class="input-txt-xmed input-txt-highlight required validate-from-db addr-search-input txt-dropoff left default success" type="text" tabindex="4" name="txt-dropoff" autocomplete="off">

    <input class="hidden-lat-lng" type="hidden" value="">

    <input id="txt-hidden-dp" class="hidden-post-code" type="hidden" name="txt-hidden-dp" value="">

    <input class="hidden-route-leg" type="hidden" value="2">

    <button id="cp-search-dest" class="btn-med ui-button ui-state-default ui-button-text-only ui-corner-all btn-hover-anim btn-row-wrapper left ui-state-hover" name="btn-row-wrapper">Search</button>

    <ul class="ul-addr-res ul-result-view" style="visibility: visible; display: block;">

    <li class="li-addr-res">

    <p class="p-addr-res" style="cursor: pointer;" tabindex="0">PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU</p>

    </li>

    <li class="li-addr-res">


    <p class="p-addr-res" style="cursor: pointer;" tabindex="1">ARTHUR JONES MOTORS, 6A, PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU</p>

    </li>

    <li class="li-addr-res">

    <p class="p-addr-res" style="cursor: pointer;" tabindex="2">BROMAKIN LTD, 10, PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU</p>

    </li>

    <li class="li-addr-res">

    <p class="p-addr-res" style="cursor: pointer;" tabindex="3">C D M DUCTWORK, 17, PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU</p>

    </li>

    <li class="li-addr-res">

    <p class="p-addr-res" style="cursor: pointer;" tabindex="4">CHARNWOOD MOLECULAR, 13, PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU</p>

    </li>

    </ul>

    <div class="div-result-info div-pagenation-style" style="display: block;">

    </div>

</div>

Answer 1

正如我在评论中发布的那样，一个选项是使用单选按钮列表，并在继续之前检查是否已选择其中任何一个。这些方面的东西：

$(document).ready(function(){
  // On form submission
  $('#submit_button').click(function() {
    // Check if at least one of the radio buttons named 'test' has been selected
    if (!$("input[@name='test']:checked").val()) {
       alert('Nothing is checked!');
       return false;
    }
    else {
      alert('One of the radio buttons is checked!');
    }
  });
});

Answer 2

每个客户端解决方案都会出现问题，因为用户可以更改客户端脚本和设置。您可以允许用户转到下一页，然后检查数据库条目是否存在。如果它不存在，请将其重定向回上一步。或者，当用户单击下一步时，您可以检查数据库条目...