[英]How to set minimum length for form input with JQuery inputmask?
I'm using RobinHerbots' input mask to set my UUID input.我正在使用RobinHerbots 的输入掩码来设置我的 UUID 输入。 It all works, but I want to retain the HTML message when the input does not have x numbers of characters and the submit button is clicked.
一切正常,但是当输入没有 x 个字符并且单击提交按钮时,我想保留 HTML 消息。 HTML alert
HTML 警报
I don't like clearIncomplete: true
because it deletes partial inputs.我不喜欢
clearIncomplete: true
因为它会删除部分输入。
My submit button triggers an event and sends a request to the server using fetch.我的提交按钮触发一个事件并使用 fetch 向服务器发送一个请求。
Here's my current code:这是我当前的代码:
$(document).ready(function(){
$('.id').inputmask({
mask: "*{8}-*{4}-*{4}-*{4}-*{12}",
definitions: {'*': {validator: "[0-9a-f]"}},
casing: "lower",
removeMaskOnSubmit: true,
// clearIncomplete: true
});
});
HTML: HTML:
<form action="" id="form">
<p><input type="text" name="id" id="id" class="id" size="50" required /> * 32 characters</p>
<input type="reset" value="reset" onclick="resetForm()">
<input type="submit" value="divert" />
</form>
EDIT: I can't figure out how to do it.编辑:我不知道该怎么做。 I settled with using another simpler plugin and keeping minlength/maxlength in the input tag.
我决定使用另一个更简单的插件并在输入标签中保留 minlength/maxlength。 Igor Escobar's JQuery Mask Plugin .
Igor Escobar 的 JQuery 掩码插件。
have you thought about using the onincomplete, you could make a function to show a div, or tooltip or an alert.您是否考虑过使用 onincomplete,您可以创建一个函数来显示 div、工具提示或警报。 NoTe, this is just a quick and dirty example:
注意,这只是一个快速而肮脏的例子:
let isvalid = false; $("#tooltip").hide(); $('#id').inputmask({ mask: "*{8}-*{4}-*{4}-*{4}-*{12}", definitions: { '*': { validator: "^[0-9a-f]" } }, casing: "lower", onincomplete: function() { isvalid = false }, oncomplete: function() { isvalid = true } }); $("#form").submit(function(e) { if (!isvalid) { $("#tooltip").show(); let tooltip = setInterval(function() { clearInterval(tooltip); $("#tooltip").hide(); }, 3000); e.preventDefault(); return } $("form").submit(); });
#tooltip{ display: none; position: absolute; cursor: pointer; left: 100px; top: 50px; border: solid 1px #eee; background-color: #ffffdd; padding: 10px; z-index: 1000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js"></script> <form id="form"> <p><input type="text" name="id" id="id" class="id" size="50" minlength="32" required /> * 32 characters</p> <div id="tooltip"> please enter at least 32 characters. </div> <input type="reset" value="reset" onclick="resetForm()"> <input id="submit" type="submit" value="Submit" /> </form>
It seems the input mask doesn't play well with the jquery UI tooltip when using minlength, I hope this helps使用 minlength 时,输入掩码似乎不能很好地与 jquery UI 工具提示配合使用,我希望这会有所帮助
Actually now that i think about it there is an easier way其实现在我想起来有一个更简单的方法
$(document).ready(function() { $('.id').inputmask({ mask: "*{8}-*{4}-*{4}-*{4}-*{12}", definitions: { '*': { validator: "[0-9a-f]" } }, casing: "lower", removeMaskOnSubmit: true, // clearIncomplete: true }); }); $(document).ready(function() { $("#form").validate({ rules: { 'id': { required: true, minlength: 32 }, } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"> <form id="form" name="form"> <p><input type="text" name="id" id="id" class="id" size="50" minlength="32" required /> * 32 characters</p> <input type="reset" value="reset" onclick="resetForm()"> <input id="submit" type="submit" value="Submit" /> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"> </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.