Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как проверить что input не пуст и в случае true добавить класс (https://javascript.ru/forum/jquery/59581-kak-proverit-chto-input-ne-pust-i-v-sluchae-true-dobavit-klass.html)

Zhyhana 17.11.2015 19:15

Как проверить что input не пуст и в случае true добавить класс
 
Доброго времени суток!
Есть форма:

<form action="#" name="user-form" class="form">
	<div class="wrapper_input">
		<input type="text" class="input" id="company_name" name="company_name" placeholder="Компания" />
	</div>
	<div class="wrapper_input">
		<input type="text" class="input" id="user_name" name="user_name" placeholder="Контактное лицо*" required/>
	</div>
	<div class="wrapper_input">
		<input type="tel" class="input" id="tel"e name="tel" placeholder="Телефон*" required/>
	</div>
	<div class="wrapper_input">
		<input type="mail" class="input" id="email"e name="email" placeholder="E-mail*" required />
	</div>
	<div class="wrapper_submit">
		<input class="submit" type="submit" value="Отправить"/>
	</div>
</form>


Нужно проверить что input не пуст. И в случае, если был введен текст добавить input'у класс.
Должно работать для ВСЕХ input'ов!!!

Mess4me 17.11.2015 19:47

Zhyhana,
так?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <title>Быстрый переход внутри документа</title>
</head>
<body>


<form action="#" name="user-form" class="form">
    <div class="wrapper_input">
        <input type="text" class="input" id="company_name" name="company_name" placeholder="Компания" />
    </div>
    <div class="wrapper_input">
        <input type="text" class="input" id="user_name" name="user_name" placeholder="Контактное лицо*" required/>
    </div>
    <div class="wrapper_input">
        <input type="tel" class="input" id="tel"e name="tel" placeholder="Телефон*" required/>
    </div>
    <div class="wrapper_input">
        <input type="mail" class="input" id="email"e name="email" placeholder="E-mail*" required />
    </div>
    <div class="wrapper_submit">
        <input class="submit" type="submit" value="Отправить"/>
    </div>
</form>


<script>

    $('input:submit').click(function () {
        $('input').each(function (i, input) {
            if(!input.value.length) return;
            $(input).addClass('newClass')
        })

    })

</script>
 
</body>
</html>

laimas 17.11.2015 20:46

http://htmlbook.ru/css/invalid

Григорий Данилович 17.11.2015 21:15

$('input').on('change', function () {if ($(this).val()!='') $(this).attr('class','classSomethingIn');});


Я не проверял и набросал черновой вариант, как бы я начал искать решение проблемы.


Часовой пояс GMT +3, время: 06:20.