ansaurus

Question

How can I dynamically change the style of some text depending on user input?

Answer 1

A:

This would depend on where the validation logic resides (as you mentioned this was a requirement). If you have a server side (asp.net/php/asp/coldfusion, etc) chunk of code (non ajax enabled then you would do this on the "post back" from the user. If you want to do this in java script then you would have to a) have the text validation performed via javascript or use javascript Ajax call to get the validation via the server side of things.

Then, you could use a library like jQuery + CSS to go ahead and change the colors, etc...

I believe in asp.net there are validation controls that will do this for you. Ajax as well.

bbqchickenrobot 2009-07-02 00:05:10

Answer 2

A:

Hi,

Depending on what javascript framework you are using (if any), the implementation will be different. But the concept will be the same:

1 - You should observe the onchange event of the given text input where the password is being typed.

2 - When the event is triggered, it should call a function that would validate if the password meets the minimum requirement, so you would also need a function to make that validation.

3 - If it does have the minimum requirements just change the text and style of the specific span.

For Prototype JS it would be something like (imagining that the first table you shown had an id for the DOM parsing):

function isValid(elem){
 // example:
 if($(elem).value.length < 8) return false;
 return true;
}

$('newpass1').observe('change', function(){ 
  if(isValid('newwpass1'){
    // it would be easier and faster with an id in the table cell
    var elem = $$('table#tableid td')[8];
    elem.innerHTML = 'Met';
    elem.setStyle({color:'green'});
   }
});

You could also use a ready to use solution like jQuery Validation and skip the in-house coding for all this validations.

ajdramos 2009-07-02 00:07:40

Answer 3

A:

First problem I see is:

Not be the same as your old password

are you sending the hash of the old password + salt and comparing it? If so you would also have to be sending your salt.

My suggestion is do this on the server side. The other requirements you could do in javascript, but you'd also want to have the same requirements on the server side. So for consistency you'd be better off keeping all of the validation in the server-side.

You can submit via ajax if you really don't want the to load another page, but doing all of the validation in javascript is probably not the best plan

Jonathan Fingland 2009-07-02 00:08:48

The form requires that users enter their old password. This would just check to see if the strings are the same. Actual validation would be server-side.

benjy 2009-07-02 14:23:41

Answer 4

A:

enter code hereYou would need to use events. First you would need to attach an event to the textbox like so,

    /* *this* passes a reference of the text box to the validateBox function */
<input type="password" id="oldpass" name="oldpass" tabindex="1" onkeydown="validateBox(this)"/>

I have used onkeydown so that validations happens when user in entering values in the textbox. (for other types of events refer link text)

Now you would need to write your business logic for the validateBox function. It is always a good practice to write this inside the inside section like so,

<head>
 ....

<script>

function validateBox(currentTextBox) {
/* this passed from the */

    if(currentTextBox.id == "blah") { 
// to perform validation according to the referenced textbox
    if(currentTextBox.value == "blah") {


        alert(" met ");

    // in practice you would need to create a initially hidden div 
//element & populate the content of the div accordingly. & then unhide it.
    }

    }

}
</script>
</head>

I would strongly suggest using javascript libraries/frameworks like jQuery etc. They make your life very easy & more productive!

Chantz 2009-07-02 00:09:53

Answer 5

+1 A:

Off the top of my head, you could create a function that contains all the validation rules you need, e.g:

function validatePass()
{
    var error = false;
    var oldPass = document.getElementById("oldPass").value;
    var newPass = document.getElementById("newPass").value;
    if(oldPass != newPass) {
        error = true;
    }
    if(error) {
        document.getElementById("someCellId").innerText = 'Not Met';
    } else {
        document.getElementById("someCellId").innerText = 'Met';
    }
    //set error to false for the next rule
    error = false;
    //more rules
    //possibly using
    //regular expressions
    //and referencing appropriate
    //not met and met table cells
}

Attach that to the keydown event of all three text boxes, e.g.:

<input type="password" id="oldpass" name="oldpass" tabindex="1" onkeydown="javascript:validatePass()" />

That should be a start.

karim79 2009-07-02 00:10:07

Thanks. Seems to be working.

benjy 2009-07-02 15:29:33

ansaurus

tags:

views:

answers:

How can I dynamically change the style of some text depending on user input?

related questions