-1
I have a modal, where I need to validate the fields, but in the modal I can’t put the required=required, because it does not open the modal.
How can I proceed, so that the function works as required?
Follows the functions I’m using:
This is an asterisk, and when the user fills the field, it switches 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 edge of the textbox to be 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 to put with the element name, and put required in the function, but it did not work.
This is the code of 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 arrived at this function, she checks, but it only works with Alert, when I pull a css to put the red border without padding and the green border with padding, but it doesn’t 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;
})
});
I don’t know if it’s your case or if it solves in your situation, but because you don’t use
<input required>and then make a CSS rule with :Valid and :invalid to switch between the asterisk and Ok? If you want I’ll answer you with a simple example.– hugocsl
If you can help me with an example, I’ll try.
– Mariana
Dude and why are you calling it ". input-group input[required]"? Couldn’t remove these [required] ?
– hugocsl
because I do this also required us, in the fields that are required. Only that in bootstrap, I need to do the condition without required, because every way I try with required, it does not open the modal, because of the button click.
– Mariana
@hugocsl edited the answer, but I still can’t do it the way I want.
– Mariana