Support » Plugin: WordPress File Upload » Limit maximum length of user fields

  • Resolved jumat

    (@jumat)


    Hi,
    I’m trying to limit the number of characters that users can type in the additional data fields. I currently see a simple text and multiple lines text options, however neither of the two seem to have a maximum length limit. Is there any way to include something like a maxlength=xx in the code below? Or any setting in the plugin that I have missed?

    userdatalabel="your name:|t:text|s:top|r:1|a:1|p:none|d:" userdatalabel2="your message|t:multitext|s:top|r:1|p:none"

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author nickboss

    (@nickboss)

    Hi, no there isn’t such an option. However you can do it with the following Javascript code, whhich you can put right below the shortcode:

    <script type="text/javascript">
    if(window.addEventListener) { window.addEventListener("load", wfu_limit_field_length, false); } else if(window.attachEvent) { window.attachEvent("onload", wfu_limit_field_length); } else { window["onload"] = wfu_limit_field_length; }
    function wfu_limit_field_length() {
        var sid = 1;
        var fid = 1;
    	var len = 15;
        var obj = GlobalData.WFU[sid].userdata;
        var props = obj.props[fid - 1];
        var field = document.getElementById("userdata_" + sid + "_field_" + props.key);
        var listeners = getEventListeners(field)["DOMAttrModified"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("DOMAttrModified", listeners[i].listener);
        var listeners = getEventListeners(field)["textInput"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("textInput", listeners[i].listener);
        var listeners = getEventListeners(field)["input"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("input", listeners[i].listener);
        var listeners = getEventListeners(field)["change"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("change", listeners[i].listener);
        var listeners = getEventListeners(field)["keypress"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("keypress", listeners[i].listener);
        var listeners = getEventListeners(field)["paste"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("paste", listeners[i].listener);
        var listeners = getEventListeners(field)["focus"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("focus", listeners[i].listener);
        var listeners = getEventListeners(field)["propertychange"];
        if (listeners) for (var i = 0; i < listeners.length; i++) removeEventListener("propertychange", listeners[i]);
        obj.attachHandlers(props, function(e) { if (e.target.value.length <= len) props.store(); else e.target.value = props.getstored(); });
    }
    </script>

    Set fid to the field number you want to restrict and set len to the max number of characters.

    Regards

    Nickolas

    Thank you Nickolas,
    when you say to put it right below the shortcode do you mean just within the wordpress block? (I imagine is a beginner question, I tried to research this but couldn’t find a solution)

    If I paste it like in the box below, on the website it just shows the unchanged fields, and then the text code just under the fields:

    [wordpress_file_upload userdata="true" userdatalabel="your name|t:text|s:top|r:1|a:1|p:none|d:/your message|t:multitext|s:top|r:1|p:none"] 
    
    <script type="text/javascript">
    if(window.addEventListener) { window.addEventListener("load", wfu_limit_field_length, false); } else if(window.attachEvent) { window.attachEvent("onload", wfu_limit_field_length); } else { window["onload"] = wfu_limit_field_length; }
    function wfu_limit_field_length() {
        var sid = 1;
        var fid = 1;
    	var len = 15;
        var obj = GlobalData.WFU[sid].userdata;
        var props = obj.props[fid - 1];
        var field = document.getElementById("userdata_" + sid + "_field_" + props.key);
        var listeners = getEventListeners(field)["DOMAttrModified"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("DOMAttrModified", listeners[i].listener);
        var listeners = getEventListeners(field)["textInput"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("textInput", listeners[i].listener);
        var listeners = getEventListeners(field)["input"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("input", listeners[i].listener);
        var listeners = getEventListeners(field)["change"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("change", listeners[i].listener);
        var listeners = getEventListeners(field)["keypress"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("keypress", listeners[i].listener);
        var listeners = getEventListeners(field)["paste"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("paste", listeners[i].listener);
        var listeners = getEventListeners(field)["focus"];
        if (listeners) for (var i = 0; i < listeners.length; i++) field.removeEventListener("focus", listeners[i].listener);
        var listeners = getEventListeners(field)["propertychange"];
        if (listeners) for (var i = 0; i < listeners.length; i++) removeEventListener("propertychange", listeners[i]);
        obj.attachHandlers(props, function(e) { if (e.target.value.length <= len) props.store(); else e.target.value = props.getstored(); });
    }
    </script>

    I have also tried to edit it in the file upload control panel but can’t save and update after the change.

    Could you suggest how to proceed?

    Thanks!
    Matteo

    • This reply was modified 1 month, 3 weeks ago by jumat.
    Plugin Author nickboss

    (@nickboss)

    Hi Matteo, I just noticed that this code is not working as expected. I will do some more tests and get back to you.

    Nickolas

    Plugin Author nickboss

    (@nickboss)

    Hi, here is an updated code, which should work. You need to put this code in a Custom HTML block right below the shortcode block.

    <script type="text/javascript">
    if(window.addEventListener) { window.addEventListener("load", wfu_limit_field_length, false); } else if(window.attachEvent) { window.attachEvent("onload", wfu_limit_field_length); } else { window["onload"] = wfu_limit_field_length; }
    function wfu_limit_field_length() {
        var sid = 1;
        var fid = 1;
        var limit = 15;
        var obj = GlobalData.WFU[sid].userdata;
        var props = obj.props[fid - 1];
        props.store = function() { var val = obj.getValue(props); if (val.length <= limit) document.getElementById("hiddeninput_" + sid + "_userdata_" + (fid - 1)).value = val; else obj.setValue(props, props.getstored()); }
    }
    </script>

    This code will restrict the length of the first field in your form.

    Nickolas

    Thank you Nickolas! It works beautifully 🙂

    marking as solved

    Plugin Author nickboss

    (@nickboss)

    Ok nice

    Regards

    Nickolas

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.