stopPropagation在按钮提交输入文本为空时

Question

我需要知道如何停止传递按钮提交时输入文本“条件”为空或使用jQuery的空。

<input type="text" name="criteria" id="criteria"> 
<button type="submit" id="findButton">Find</button> 

任何帮助将是伟大的。

Answer 1

您可以订阅按钮上的点击事件或表单标记的提交事件。下面的例子显示了按一下按钮，如果有文本框内没有文本，然后它可以防止像你想的使用preventDefault()

$(document).ready(function() { 
 
    $("#findButton").click(function(evt) {  
 
    if ($("#criteria").val().trim() === '') { 
 
     alert('Empty text box ---> show something to client'); 
 
     evt.preventDefault(); 
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" name="criteria" id="criteria"> 
 
    <button type="submit" id="findButton">Find</button> 
 
</form>

Answer 2

你可以创建一个JavaScript函数来测试场的无效：

function validate() { 
    return ($('#criteria').val() != null); 
} 

，然后返回按钮的onclick方法的结果：

<button type="submit" id="findButton" onclick="return validate();" >Find</button> 

当你通过一个

点击提交操作的错误结果未被激活。