FilteredTextBox in Lift?

Question

I'm looking for a filteredTextBox in lift to block users from inserting wrong input types.

Something like this Ajax example: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/FilteredTextBox/FilteredTextBox.aspx

Someone knows something similar in lift or knows if SHtml.ajaxText has some Attribute to do that?

Answer 1

If you are targeting HTML5 capable browsers, SHtml has outputs for specific types - like SHtml.number(...) and SHtml.range(...). You can accomplish the same thing using SHtml.ajaxText(label, func, "type" -> "number") (or "type" -> "range", etc...).

To target other browsers (or for more robust functionality), JQuery might be your best bet. You could write your own validation function to get called, or googling quickly found this library which looks like it would work (though there must be others too). Based on their documentation, to use it, it looks like you'd just need to do this:

Snippet:

//add a class for the type (in this case to validate lowercase)
".lc-input" #> SHtml.ajaxText(label, func, "class" -> "validate-this-lowercase")

Template:

//Add this into a processed template - head_merge should add to the head of the document

<head_merge>
  <script type="text/javascript">
    $(document).ready(function(){ 
       $(".validate-this-lowercase").filter_input({regex:'[a-z]'});
    });
  </script>
</head_merge>
<span class="lc-input"></span>