pessoal precisava inserir os campos do meu formulário como obrigatórios fiz isso via jQuery porem não obtive exito a ideia e que fique uma borda vermelha nos campos que não foram preenchidos meu código não funciona seque parte do meu código do form:
HTML:
<form class="form" id="form">
<div class="form-group row">
<div class="col-md-12">
<input type="text" name="name" class="form-control" id="name"
placeholder="NOME COMPLETO" required/>
</div>
</div>
<div class="form-group row -inputs">
<div class="col-sm-4 col-xs-12">
<input type="text" name="birthday" class="form-control" id="data-mask"
placeholder="DATA DE NASCIMENTO" required/>
</div>
<div class="col-sm-4 col-xs-12">
<input type="text" name="rg" class="form-control" id="rg-mask"
placeholder="RG" required/>
</div>
<div class="col-sm-4 col-xs-12">
<input type="text" name="cpf" class="form-control" id="cpf-mask"
placeholder="CPF" required/>
</div>
</div>
<div class="form-group row -inputs">
<div class="col-sm-4 col-xs-12">
<input type="text" name="email" class="form-control" id="mail"
placeholder="E-MAIL" required/>
</div>
<div class="col-sm-4 col-xs-12">
<input type="text" name="phone" class="form-control" id="phone-mask"
placeholder="TELEFONE" required/>
</div>
<div class="col-sm-4 col-xs-12">
<input type="text" name="cellphone" class="form-control" id="cel-mask"
placeholder="CELULAR" required/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="text" name="address" class="form-control" id="address"
placeholder="ENDEREÇO COMPLETO" required/>
</div>
</div>
<div class="form-group row -inputs">
<div class="col-sm-4 col-xs-12">
<input type="text" name="city" class="form-control" id="city"
placeholder="CIDADE" required/>
</div>
<div class="col-sm-4 col-xs-12">
<input type="text" name="state" class="form-control" id="state"
placeholder="ESTADO" required/>
</div>
<div class="col-sm-4 col-xs-12">
<input type="text" name="cep" class="form-control" id="cep-mask"
placeholder="CEP" required/>
</div>
</div>
</form>
<div class="border-warranty">
<p id="monthly-value"></p>
<a href="#" class="btn-warranty btn-indenizometro" id="submit-btn">
<img src="{{URL::asset('/img/loading.gif')}}" class="loaderImage" width="25" style="display: none;">
Solicitar <br><span><b>meu seguro</b></span><br>
</a>
</div>
JS:
<script>
$(document).ready(function(){
$("input").blur(function(){
if($(this).val() == "")
{
$(this).css({"border" : "1px solid #F00", "padding": "2px"});
}
});
$("#submit-btn").click(function(){
var cont = 0;
$("#form input").each(function(){
if($(this).val() == "")
{
$(this).css({"border" : "1px solid #F00", "padding": "2px"});
cont++;
}
});
if(cont == 0)
{
$("#form").submit();
}
});
});
</script>
OBS: Lembrando que meu botão de enviar não está dentro do <form>
Dentro do meu botão de enviar tem um arquivo js que faz uma requisição via ajax acredito que isso não ira dar problema mais estou colocando o código mesmo assim para vocês verem o que esse botão faz;
JS do botão enviar:
$("#submit-btn").click(function (e) {
e.preventDefault();
var data = $('form').serializeArray();
if($(this).hasClass('btn-warranty')) {
var inputRangeValue = $('.final-value').first().text();
var specialty_id = {name: 'specialty_id', value: $('#specialty_id').val()};
var value = {name: 'value', value: inputRangeValue + '000'};
data.push(specialty_id);
data.push(value);
}
if($(this).hasClass('btn-indenizometro')) {
var question_1 = $('input[name=question_1]:checked').val();
var question_2 = $('input[name=question_2]:checked').val();
var question_3 = $('input[name=question_3]:checked').val();
//var reason = {name: 'reason', value: sessionStorage.tipo };
var monthly = {name: 'monthly', value: $('#monthly-value').text() };
data.push(question_1);
data.push(question_2);
data.push(question_3);
data.push(monthly);
//data.push(reason);
}
var category = {name: 'category', value: window.location.pathname};
data.push(category);
//Ajax post data to server
$.ajax({
type: 'POST',
url: '/request',
data: data,
dataType: 'json',
success: function (data) {
$('#modal-success').modal('show');
$('form')[0].reset();
},
error: function (data) {
//console.log(data);
}
});
});