Question

I am trying to write some validation as part of my page that makes sure if the textbox has some required text that it will disable the button if its not there.

I have this working perfectly using the following jQuery code:

 <script>
 $(document).on("ready", function () {
     $('input[type="text"]').on('blur', function () {
        var $required = $(this).next().val();
        var $image = $(this).parent().next().children('img');
        var $errors = $('img:visible').length;
        if (($(this).val().indexOf($required) == -1) && ($(this).val() != '')) {
            $image.show();
            $("#submit").prop("disabled", true);
        } else {
            $image.hide();
            //Manually subtract from error otherwise it doesnt subtract until the next focus change
            $errors--;
            if ($errors == 0)
                $("#submit").prop("disabled", false);
        }
    });
});

</script>

The problem occurs when the textbox requires two values. They are stored in a hidden input as a comma seperated string. How do i check that both exist? They can be in there in any order as long as they are both there. I know I can use a .split(‘,’) to get and array and test them but thats the part im stuck on.

I have tried using both .inArray() and .each() but just cannot get anywhere with it.

I tried to set up a fiddle but couldnt get it working.

Here is a cutdown version of the HTML as its an MVC project so most of this is being populated by the models etc.

HTML

  <table width="100%" border="1px solid">
    <tr>
        <th>Source Text</th>
        <th>Translation</th>
    </tr>

    <tr>
        <td>Some text here</td>
        <td><input type="Text"><input type="hidden" value="Some"></td>
        <td><img id="cross" src="../cross.png" class="jq-cross hid" alt="error" /></td>
    </tr>

    <tr>
        <td>Some text here</td>
        <td><input type="Text"><input type="hidden" value="Some,Here"></td>
        <td><img id="cross" src="" class="jq-cross hid" alt="error" /></td>
    </tr>
<tr><td colspan="3"><button id="submit" type="submit">Update Translations</button>  </td></tr>
 </table>

Any help you can give me would be most appreciated. Hopefully I have provided enough information here.

Thanks in advance

Answer 1

You could write a function to loop over your comma seperated string, something like:

function isTextInText(text, searchtext) {
    var arr = text.split(',');

    for(var i=0, len=arr.length; i < len; i++) {
        if (searchtext.indexOf(arr[i]) == -1) return false;
    }
    return true;
}

console.log(isTextInText("hello","hello there")); //true   
console.log(isTextInText("hello,there","hello there")); //true
console.log(isTextInText("hello,bye","hello there")); //false

Then your if logic could become:

if (isTextInText($required,$(this).val())

Fiddle – http://jsfiddle.net/e7qkd/