Tenho um modal, onde preciso fazer as validações dos campos, porém no modal não consigo colocar o required=required
, pois ele não abre o modal.
Como posso proceder, para que na função funcione como required?
Segue as funções que estou utilizando:
Esta é um asterisco, e quando o usuário preenche o campo, muda para um sinal de ok.
$(document).ready(function() {
$('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup change', function() {
var $form = $(this).closest('form'),
$group = $(this).closest('.input-group'),
$addon = $group.find('.input-group-addon'),
$icon = $addon.find('span'),
state = false;
if (!$group.data('validate')) {
state = $(this).val() ? true : false;
} else if ($group.data('validate') == "email") {
state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
} else if ($group.data('validate') == 'phone') {
state = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test($(this).val())
} else if ($group.data('validate') == "length") {
state = $(this).val().length >= $group.data('length') ? true : false;
} else if ($group.data('validate') == "number") {
state = !isNaN(parseFloat($(this).val())) && isFinite($(this).val());
}
if (state) {
$addon.removeClass('danger');
$addon.addClass('success');
$icon.attr('class', 'glyphicon glyphicon-ok');
} else {
$addon.removeClass('success');
$addon.addClass('danger');
$icon.attr('class', 'glyphicon glyphicon-asterisk');
}
//if ($form.find('.input-group-addon.danger').length == 0) {
// $form.find('[type="submit"]').prop('disabled', false);
//} else {
// $form.find('[type="submit"]').prop('disabled', true);
//}
});
$('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');
});
E esta é pra borda do textbox ficar em vermelho quando clica e e quando digita ela muda de cor:
$(document).ready(function () {
$('#contact-form').validate({
rules: {
txtnome: {
minlength: 2,
required: true
},
txtHora: {
required: true
},
txtData: {
required: true
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
});
Tentei colocar com o nome do elemento, e colocar required na função, porém não deu certo.
Este é o código do meu modal:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="row">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="panel panel-default">
<div style="text-align: center;" class="panel-heading">
<p class="panel-title">
<asp:Label ID="Label78" runat="server" Font-Size="Large" Text="Modal"></asp:Label>
</p>
</div>
<div class="row">
<div class="modal-body">
<div class="form-group">
<div style="display: none;" id="idalertModal" class="form-group">
<div class="alert alert-danger alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Atenção!</strong>
<asp:Label ID="lbAlertAviso" runat="server" Text="Label"></asp:Label>
</div>
</div>
</div>
<div class="col-md-2">
<asp:Label ID="Label18" runat="server" Text="Hora"></asp:Label>
</div>
<div class="col-md-3">
<div class="input-group">
<asp:TextBox ID="txtHora" runat="server" class="form-control" onblur="Verifica_Hora(this);"></asp:TextBox>
<span class="input-group-addon danger"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="col-md-1">
<asp:Label ID="Label250" runat="server" Text="Data"></asp:Label>
</div>
<div class="col-md-4">
<div class="input-group">
<asp:TextBox ID="txtData" runat="server" class="form-control" onblur="limparDataInvalida(this);"></asp:TextBox>
<span class="input-group-addon danger"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="col-md-2">
<asp:Label ID="Label19" runat="server" Text="Observação"></asp:Label>
</div>
<div class="col-md-9">
<textarea id="txtObservacao" cols="20" rows="2" runat="server" class="form-control" style="resize: none"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnGravar" runat="server" CssClass="btn btn-success btn-block" Text="Gravar" OnClick="btnGravar_Click" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Cheguei nesta função, ela verifica, porém ela só funciona com o alert, quando puxo um css para colocar a borda vermelha sem preenchimento e a borda verde com preenchimento, porém não funciona.
$(document).ready(function () {
function validateCampo(campoField) {
if ($("#<%=txtHora.ClientID %>").val() == "") {
alert("vazio");
}
else { alert("preenchido");}
}
$("[id$='txtHora']").on('change', function () {
validateCampo($(this).val());
return false;
})
});
<input required>
e depois faz uma regra CSS com :valid e :invalid para alternar entre o asterisco e o Ok? Se quiser eu te respondo com um exemplo simples pra vc ver como fica.