Possible IF statement with Javascript?

Question

I'm working on a .net website and I have a bit of a situation.

Say I have...

<input type="text" class="name" id="name">
<p></p>

<input type="text" class="surname" id="surname">
<p>Error!</p>

What Id like to do, using javascript, is detect that the second paragraph tag says 'Error!' and add a class to the input tag before it.

I know this seems like a bit of a strange way of working but any advice would be greatly appreciated!

Hi all, the adivce and answers i was given worked fine on a fresh page on jsfiddle only i cant seem to get them to work on my actual site.

My P and input tags are constructed like this....

<li class="yourdetli">
<label class="yourdet">Street Name</label>
<input type="text" id="ctl00_ContentPlaceHolder1_TB_SName" name="ctl00$ContentPlaceHolder1$TB_SName">
    <span style="color: Red; display: none;" class="errorp" id="ctl00_ContentPlaceHolder1_RequiredFieldValidator6">
    <p>You must complete this field</p></span>
</li>

and my JS is...

<script type="text/javascript">
    $(document).ready(function() {
        $('p:contains("You must complete this field")').prev('input').addClass('error');
    });
</script>

only for some reason it doesnt seem to add my class, can anybody see why?

How are you generating Error!? Can you generate it as Error! instead? — jrummell
– jrummell, Commented Oct 24, 2011 at 13:35
I'd recommend adding the error css class to your validator's CssClass property so that its already rendered server side. — jrummell
– jrummell, Commented Oct 24, 2011 at 14:48

genesis · Accepted Answer · 2011-10-24 13:32:46Z

2

You can use

$('p:contains("Error")').prev('input').addClass('error');

edited Oct 24, 2011 at 13:32

genesis

51.1k20 gold badges99 silver badges127 bronze badges

answered Oct 24, 2011 at 13:31

Lapple

3,37322 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Liam Over a year ago

On my page I have 12 inputs, will this work for each of them or do I need to add anything? and if the p tag has a class would $('p.errorp:contains.... work?

Lapple Over a year ago

@Liam, yes, jQuery will implicitly loop against each matched element. If you assign a class only to the elements that contain Error! string, you don't need to use :contains selector. Only $('p.errorp'). Otherwise, yes, you are right.

genesis · Accepted Answer · 2011-10-24 13:30:08Z

1

Maybe try

$("p:eq(1):contains('Error!')").prev('input').addClass('error');

answered Oct 24, 2011 at 13:30

genesis

51.1k20 gold badges99 silver badges127 bronze badges

Comments

jtfairbank · Accepted Answer · 2011-10-24 13:30:06Z

0

You can check the text value of the second  tag by using jQuery. You'll need a selector that finds it (in this example, it is the last  tag).

if ($("p").last().text() == "Error!") {
    $("input#surname").addClass("myClass");
    // do other stuff here
}

answered Oct 24, 2011 at 13:30

jtfairbank

2,3072 gold badges23 silver badges33 bronze badges

2 Comments

genesis Over a year ago

He looks for second one, not the last one

jtfairbank Over a year ago

He says the second one, which is also the last one. None of us know the rest of his code, so based on his example both our solutions could work.

ipr101 · Accepted Answer · 2011-10-24 13:33:17Z

0

Try -

if ($("input#surname").next("p:contains('Error!')").length > 0) {
      $("input#surname").addClass('yourclass');  
}

answered Oct 24, 2011 at 13:33

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

jrummell · Accepted Answer · 2011-10-24 14:50:33Z

I'd recommend adding the error css class to your validator's CssClass property so that its already rendered server side. This way if you change your error message, you won't have to change any javascript to display it.

<asp:RequiredFieldValidator ID="requiredValidator" CssClass="error" ControlToValidate="..." ErrorMessage="You must complete this field"/>

Or if you're looking to style all of your validators with the same class, you can add the following script to your master page.

$(document).ready(function()
{
    if (Page_Validators != null)
    {
        for (i = 0; i < Page_Validators.length; i++)
        {
            Page_Validators[i].className = "error";
        }
    }
});

See http://www.jrummell.com/blog/index.php/2009/08/apply-the-same-css-class-to-all-validators-in-a-web-project/ for more information.

Collectives™ on Stack Overflow

Possible IF statement with Javascript?

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related