0

我有一个这样的Javascript函数：

function validateInput() {
    var search_text = document.getElementById('search_text').value;
    var size = document.getElementById('size').value;
    var submitButton = document.getElementById('sb_search');

    submitButton.removeAttribute('disabled');
    var filter = /^[\x20-\x7E]+$/;

    if (filter.test(search_text) && filter.test(size)) {
        return true;
    } else {
        submitButton.setAttribute('disabled', 'disabled');
    }
}

如果输入字段 search_text 和 size 满足正则表达式，它应该允许提交表单。但即使我输入了正确的值，它也不允许我提交表单。如果我只使用这样的条件，它就可以工作：

if (filter.test(search_text)){
    return true;
}

我希望两个输入字段都满足正则表达式。我错过了什么？

编辑 HTML

<form action="/search/" id="ui_element" class="sb_wrapper">{% csrf_token %}
    <!-- <p> <span class="sb_down"></span> -->
    <input class="sb_input" type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
    <input class="sb_search" id="sb_search" type="submit" value="Go" onclick="validateInput()">
    </p>
    <ul class="sb_dropdown" style="display:none;">
        <li class="sb_filter">Filter your search</li>
        <li>
            <select id="selectmode" name="selectmode" class="filter">
                <option value="filter">Filter</option>
                <option value="date">By date</option>
                <option value="size">By size</option>
            </select>
        </li>
        <li class="bydateinputs" style="display: none">
            <label>Date:</label>
            <input type="text" id="date_picker" style="width:100px;" name="date" class="text_search" />
        </li>
        <li class="bysizeinputs" style="display: none">
            <label>Size:</label>
            <input type="text" id="size" style="width:100px;" name="size" placeholder="eg: 4 MB" class="text_search" />
        </li>
    </ul>
</form>
4

3 回答 3

0

我认为您的 HTML 语法可能缺少一些结束或开始标签。我试图纠正他们

<form action="/search/" id="ui_element" class="sb_wrapper">
         {% csrf_token %}
  <p>  <-- missing opening p tag
   <input class="sb_input" type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
    <input class="sb_search" id="sb_search" type="submit" value="Go" onclick="validateInput()" >

  </p>
  <ul class="sb_dropdown" style="display:none;">
    <li class="sb_filter">Filter your search</li>
    <li>
     <select id="selectmode" name="selectmode" class="filter">
      <option value="filter">Filter</option>
      <option value="date">By date</option>
      <option value="size">By size</option>
     </select>
    </li>
    <li class="bydateinputs" style="display: none">
     <label> Date:</label>
     <input type="text" id="date_picker" style="width:100px;" name="date" class="text_search" />
    </li>
    <li class="bysizeinputs"  style="display: none">
      <label> Size:</label>
      <input type="text" id="size" style="width:100px;" name="size" placeholder="eg: 4 MB" class="text_search" />
   </li>
  </ul>

于 2013-06-25T06:35:13.403 回答
0

您可能遇到的一个问题是提交按钮仍然处于禁用状态。当您单击它时，您将其禁用，如果之后用户编辑他的输入现在无法提交，因为该按钮仍然被禁用。

当按钮被禁用时，它不会生成点击事件，因此代码不会再次运行。

具有 id 的元素size没有值（实际上，它甚至不可见，至少最初不可见，因为它位于具有 style 的元素内display: none），并且您的正则表达式不允许空字符串。

将您的正则表达式从更改/^[\x20-\x7E]+$/为/^[\x20-\x7E]*$/允许空字符串。

顺便说一句：我怀疑您计划使用一些您没有向我们展示的 javascript 使该元素可见。

于 2013-06-25T06:35:35.350 回答
0

称之为..

onclick="return validateInput();"

除此之外，您也不需要在您的 JS 中编写 else 子句..

你的 JS 可能是

function validateInput() {
    var search_text = document.getElementById('search_text').value;
    var size = document.getElementById('size').value;
    var submitButton = document.getElementById('sb_search');


    var filter = /^[\x20-\x7E]+$/;

    if (filter.test(search_text) && filter.test(size)) {
        submitButton.removeAttribute('disabled');
        return true;
    }
    return false;

}
于 2013-06-25T06:35:47.333 回答