Variable return with p in javascript

Question

Variable return with p in javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have a code that does a checking of the password and if it is short, print the corresponding. My problem is that I have the variable return and I need this to print a text wrapped in <p>...</p> , but I do not know how to do it. Here I leave the code.

 $('#password').keyup(function () {
    $('#result').html(checkStrength($('#password').val()))
})

function checkStrength(password) {
    var strength = 0
    if (password.length < 6) {
        $('#result').removeClass()
        $('#result').css("background-color", "red"),
        return 'Too short'
    }
    if (password.length > 7) strength += 1

    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1

    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

    if (strength < 2) {
        $('#result').removeClass(),
        $('#result').css("background-color" , "orange")
        return 'Weak'
    } else if (strength == 2) {
        $('#result').removeClass()
        $('#result').css("background-color", "green")
        return 'Good'
    } else {
        $('#result').removeClass()
        $('#result').css("background-color", "var(--jobcafe-grün)")
        return 'Strong'
    }
}

I hope someone can help me. Greetings

javascript jquery formularios

asked by Dario B. 20.06.2018 в 11:44

source

2 answers

1

What is the reason for wanting to return it wrapped in an element p? Could you try this?

$('#result').html('<p>${checkStrength( $('#password').val() )}</p>');

It is for the strength check function to do just that, it does not have to understand HTML (which would be a good design principle, which you can consult here: SRP or Principle of Single Responsibility .

In this way, the checkStrengh function also becomes easier to test, especially when the flow passes through a short or weak password, and you do not have to mix with HTML code.

answered by 20.06.2018 в 11:52

Problems obtaining data when converting an int to a decimal field. Retrieve data from a form

score 1 · Accepted Answer

Have you tried, simply, to put return '<p>Too short</p>' ?

It works well, here is an example with your code:

$('#password').keyup(function () {
    $('#result').html(checkStrength($('#password').val()))
})

function checkStrength(password) {
    var strength = 0
    if (password.length < 6) {
        $('#result').removeClass();
        $('#result').css("background-color", "red");
        return '<p>Too short</p><p>muy corta</p>'
    }
    if (password.length > 7) strength += 1

    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1

    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1

    if (strength < 2) {
        $('#result').removeClass(),
        $('#result').css("background-color" , "orange")
        return 'Weak'
    } else if (strength == 2) {
        $('#result').removeClass()
        $('#result').css("background-color", "green")
        return 'Good'
    } else {
        $('#result').removeClass()
        $('#result').css("background-color", "var(--jobcafe-grün)")
        return 'Strong'
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<div id="result"></div>