Question

我想写一下，如果其中一个是空白然后提交表单，但两者都是空白，那么不要提交表格。我如何在文本框中进行验证并使用表格中的jquery进行多选？

Jquery的

// here i write the code that if both are blank then dont submit form
$('#id_keywordName').each(function() {
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });



        $('#id_selectedKeyword').each(function() {
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });
 if (isValid == false) 
            e.preventDefault();
        else 
           return true;
    });

HTML

<form action="/tcgsave/" method="POST" onsubmit="return" name="mainForm">
    <input id="id_keywordName" name="id_keywordName"/>
    <select  id="id_selectedKeyword" name="id_selectedKeyword" multiple>
        <option value="hello">hello</option>
        <option value="hi">hi</option>
        <input type="submit">submit</input>
     </select>
</form>

Answer 1

试试这个Jquery片段：

<script type="text/javascript">
function test()
{
   if(($('#id_selectedKeyword option:selected').length>0)||($('#id_keywordName').val().trim()!=''))
    return true;
 else
    return false;
}
</script>

并使用如下的test（）方法：

<form action="abc.html" method="POST" onsubmit="return test();" name="mainForm">

Answer 2

您可以使用充当旗帜的计数器：

$("#register-form").submit(function(){
    var counter = 0;
    $(".required").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("highlight");
            counter++;            
        }
        else{
            $(this).removeClass("highlight");
        }
    });
    console.log(counter);
    var isFormValid = (counter < 2);
    if (!isFormValid) alert("Please fill in the required field (indicated by *)");
    return isFormValid;
});

<强> HTML ：

<form action="/tcgsave/" method="POST" onsubmit="return" name="mainForm" id="register-form">
  <table>
    <tr>
        <td>
            <select id="id_selectedKeyword" name="id_selectedKeyword" class="required">
                <option></option>
                <option value="hello">hello</option>
                <option value="hi">hi</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
          <input id="id_keywordName" name="id_keywordName" class="required" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="somesubmit" type="submit" class="submit" value="Submit" />
        </td>
    </tr>
  </table>  
</form>

JSFiddle

如何在表单中使用jquery对文本框和多选进行验证

2 个答案: