Clever Geek Handbook

Disable button if string matches string in jquery

I am trying to create a site 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 these lines match. So far I've managed to block them with a function .keyup()

, but if I write more than those tags, for example <link rel="stylesheet" href="css/bootstrap.min.css">

, it doesn'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 these lines match lines? Need this help badly. Thank.

+3


source to share


4 answers


You can use regex

to check if the text contains a specific 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

  • /

    : separators regex

  • \/?

    : Matches 0 or 1 /

  • .*?

    : Matches any character any no. time
  • |

    : OR in regex
+3


source


You can use the following regex to match these strings.

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

To turn off updating when items are present. This, however, will not solve all cases. If anyone wants, they can bypass the regex by writing < style >

or using different encoding and so on.



In my opinion, the best option is to view the content from a browser perspective. In other words, take the input and inject an element from 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 is one question on SO that explains why not parse HTML with regular expressions .. Open RegEx tags except standalone XHTML tags

+1


source


Just use regex to check for anything in 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 off button and .prop('disabled',false)

for on button. Both are used after $('#deactivedivEditor-2')

.

0


source


First of all, you can use regular expressions to test a string with a pattern at any position. The regex I show below matches the match between two angular brackets - even non-html tags.

Second - this is a bit off topic - the best and recommended solution for setting and disabling the "disabled" attribute using jquery is this . prop ()


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

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


source






More articles:


All Articles