using jquery addclass and removeclass in PHP

Question

I' working on a PHP-Jquery-Ajax submit info form and I would like to use the addclass and removeclass jquery methods but I can't make it work as I want, so my question is: How do I have to fix the code below in order to add a css depending on the user input?

The addclass and removeclass are in the function verificaForm where I validate the input fields, in this case I only show you two fields validations but there are more... I also know that out there is a library(validate.js) that helps to validate the inputs from users but in this specific case I must have to sitck to this code.

here is my js code and thanks in advance:

$(document).ready(function () {

    $('#ID_formulario').on('submit', function (e) {

        e.preventDefault();

        var nombre = $('input#ID_nombre').val().trim();
        var email = $('input#ID_email').val().trim();

        if (validaForm(nombre, email)) {

            $('#result').html("<b>resolviendo peticion...</b>");

            var url = $(this).attr('action');
            var data = $(this).serializeArray();
            var type = $(this).attr('method');

            //...more code goes here ... it works fine ...
        }

    });
});

function validaForm(nombre, email) {

    if ((nombre == '') || nombre.replace(/s+/, '') == '') {
        alert("Favor especificar nombre");
        nombre.addClass('hightlight');
        return false;
    } else {
        else nombre.removeClass('hightlight');
    }

    if (nombre.length < 4) {
        alert('El valor del campo es muy corto');
        return false;
    }
    if ((email == '') || email.replace(/s+/, '') == '') {
        alert("Favor especificar correo");
        return false;
    }
    return true;
}

You're using var nombre with .val().trim(). you need to add the class to the input and not to the val() of the imput. If you create another variable like var nombre =('input#ID_nombre'); it would work. jsfiddle.net/jnfnLmqg — Nick
– Nick, Commented Mar 19, 2015 at 12:34

Francesco · Accepted Answer · 2015-03-19 12:38:11Z

1

You should pass the element to the function, not the value. Then You can obtain the value within the function. Something like that:

 var nombre = $('input#ID_nombre');
 var email = $('input#ID_email');

    if(validaForm(nombre, email)) 

    ....


   function validaForm(nombre,email){

   var nombre_value = nombre.val().trim();
   var email_value = email.val().trim();
   .......

answered Mar 19, 2015 at 12:38

Francesco

1,4238 silver badges16 bronze badges

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

2 Comments

Pablo Tobar Over a year ago

you are right, shame on me, by the way, how do you use the addclass and removeclass methods in your code, it might be something like this: nombre_value.addclass("myclass");?

Francesco Over a year ago

no, it will be nombre.addClass("className") , that's why you have to pass the element and not the value

lshettyl · Accepted Answer · 2015-03-19 12:57:01Z

1

So, you can add classes to a jQuery object and not to a value. Change things around like below.

Replace

var nombre = $('input#ID_nombre').val().trim();
var email = $('input#ID_email').val().trim();

if (validaForm(nombre, email)) {

With

if (validaForm($('input#ID_nombre'), $('input#ID_email'))) {

And modify your function as below.

function validaForm(nombre,email) {

    var nombreVal = $.trim(nombre.val());
    var emailVal = $.trim(email.val());

    if ((nombreVal == '') || nombreVal.replace(/s+/, '') == '') {
    ..........
    ..........
}

And remove that extra else in here:

} else {
    else nombre.removeClass('hightlight');
}

And change it to

} else {
    nombre.removeClass('hightlight');
}

edited Mar 19, 2015 at 12:57

answered Mar 19, 2015 at 12:47

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

4 Comments

Francesco Over a year ago

I answered in the same way 10 minutes ago !?

Pablo Tobar Over a year ago

thanks, the addclass method should be placed in the first if of the function right?

lshettyl Over a year ago

Looks like it:) But it also depends on your needs.

Pablo Tobar Over a year ago

thanks LShetty, both answers(Francesco and yours) solved my question

Collectives™ on Stack Overflow

using jquery addclass and removeclass in PHP

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related