Disable button if a string is matched from a line in jquery

Question

I'm trying to build a website using jquery-1.10.2 where I want to block css related strings like <style>, <link> etc. I want to disable the submit button if any of those strings match. So far I've managed to block them using .keyup() function but if I write more than those tags like <link rel="stylesheet" href="css/bootstrap.min.css"> then it won't work. Here are my codes,

$(document).ready(function () {
    $('#inputdivEditor-2').keyup(function () {
        var input = $(this).val();
        if (input == "<style>" || input == "</style>" || input == "<link>") {
            $('#deactivedivEditor-2').attr("disabled", "disabled");
        }else{
            $('#deactivedivEditor-2').removeAttr("disabled");
        }
    });
});

JSFiddle Demo

How can I disable the button if any of those strings match from any lines? Need this help badly. Thanks.

Answer 1

You can use regex to check if the text contains certain pattern.

$(document).ready(function () {
    var regex = /<\/?style.*?>|<link.*?>/;
    $('#inputdivEditor-2').keyup(function () {
        var val = $(this).val();

        $('#deactivedivEditor-2').prop('disabled', regex.test(val));
    });
});

Demo: http://fiddle.jshell.net/tusharj/52xd3s11/

Regex

1. / : Delimiters of regex
2. \/?: Matches 0 or 1 /
3. .*?: Matches any character any no. of times
4. |: OR in regex

Answer 2

You can use the following regex to match those strings.

var regex = /<(style|link)>/;

To disable update when the elements are present. That however wouldn't solve all cases. If someone wants he can bypass the regex by writing < style > or with using different encoding and so on.

In my opinion a better option is to look at the content from a browser's perspective. In other words take the input and make an element out of it:

var dummyElement = $('<div></div>');
dummyElement.html(input); //contents of the input field
if(dummyElement.find('style').length > 0) {
    //you get the point
}

..because there's that one question on SO, which explains why not parse HTML with regexes.. RegEx match open tags except XHTML self-contained tags

Answer 3

Just use regex to check anything between < > like below:

DEMO

$(document).ready(function () {
    $('#inputdivEditor-2').keyup(function () {
        var input = $(this).val();
        var regex=/<*>/;
        if (regex.test(input)) {
            $('#deactivedivEditor-2').attr("disabled", "disabled");
        } else {
            $('#deactivedivEditor-2').removeAttr("disabled");
        }
    });
});

You can use .prop('disabled',true) for disable button and .prop('disabled',false) for enable button. Both are used after $('#deactivedivEditor-2').

Answer 4

First of all, you can use regular expressions to check the string with a pattern at any position. The regexp I show below matches on anything between two angular braces - even non html tags too.

Secondly - it is a bit off topic - the best and recommended solution for setting and disabling the "disabled" attribute with jquery is by using the .prop() method

$(document).ready(function () {
    $('#inputdivEditor-2').keyup(function () {
        var inputValue = $(this).val();
        var regexp = /]*?>/;
        var isDisabled = regex.test(inputValue);

        $('#deactivedivEditor-2').prop("disabled", isDisabled);
    });
});