I have a modal, where I need to do the field validations, however in the modal I can not put the required=required , because it does not open the modal.
How can I proceed, in order for the function to function as required?
Here are the functions I'm using:
This is an asterisk, and when the user populates the field, it changes to an ok sign.
$(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');
});And this is for the border of the textbox to stay in red when you click and when you type it changes color:
$(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');
}
});
});I tried putting with the name of the element, and put required in the function, but it did not work.
This is the code for my 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>I came up with this function, it checks, but it only works with alert, when I pull a css to put the red border unfilled and the green border with padding, but it does not work.
$(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;
})
});