I'm trying to create a dynamic form, with email and phone field, which give the User option to add an email and an additional telephone.
I took an example on the internet and I am trying to adapt it to my needs.
if I use a single option in case the email to JS function works correctly but when I try to add the phone it will stop working.
and renomeira all fields so as not to duplicate error, until even created a new variable in JS function to limit the number of fields added.
and they are not added.
I must be missing somewhere I know, but I can not see where.
I'm using the plugin formValidatorBootStrap.
the form details are as follows
<form id="form-contato" method="post" class="form-horizontal">
<!-- Aqui fica o input femail -->
<div class="col-md-6">
<!-- Aqui o input esta com o name email[] pois é uma matriz que recebera mais de um valor no mesmo ID -->
<input type="email" class="form-control" id="femail1" name="email[]" placeholder="Seu endereço de email aqui.">
</div><!-- /.femail -->
<!-- Aqui um botao que add mais um filed de email -->
<div class="col-md-1">
<!-- Aqui um botao para adicional um email a mais pelo email[] -->
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div><!-- /.botao field -->
</div><!-- /.grupo email -->
<!-- Aqui o template field que fica escondido e um botao de remover -->
<div class="form-group hide" id="emailTemplate">
<div class="col-md-offset-3 col-md-6">
<input class="form-control" type="text" id="femail2" name="email[]" placeholder="Seu email alternativo">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div><!-- /.emailTemplate -->
<!-- Aqui é grupo do input fTelefone -->
<div class="form-group">
<!-- Label para controle de indentificaçao do compo fTelefone -->
<label class="control-label col-md-3 ">Telefone</label>
<!-- Aqui fica o input ftelefone-->
<div class="col-md-6">
<!-- Aqui o input esta com o name tel[] pois é uma matriz que recebera mais de um valor no mesmo ID -->
<input type="text" class="form-control" id="ftelefone1" name="tel[]" placeholder="Digite aqui seu Telefone.">
</div><!-- /. ftelefone -->
<!-- Aqui um botao para adicional um telefone a mais pelo tel[] -->
<div class="col-md-1">
<button type="button" class="btn btn-default addButtonTel"><i class="fa fa-plus"></i></button>
</div><!-- /.botao tel -->
</div><!-- /.grupo fTelefone -->
<!-- Aqui o template field que fica escondido e um botao de remover -->
<div class="form-group hide" id="telTemplate">
<div class="col-md-offset-3 col-md-6">
<input class="form-control" type="text" id="ftelefone2" name="tel[]" placeholder="Seu Telefone alternativo">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default removeButtonTel"><i class="fa fa-minus"></i></button>
</div>
</div><!-- /.telTemplate -->
<!-- Aqui um botao submit que faz a validação do form-contvrole -->
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="submit" class="btn btn-success">Enviar</button>
</div>
</div>
</form><!-- /.fomr-contato -->
and this is my javascript code
$(document).ready(function() {
// The maximum number of options
var MAX_EMAILS = 2;
var MAX_TELS = 3;
$('#form-contato')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'email[]': {
validators: {
notEmpty: {
message: 'O campo Email é obrigatório e não pode ser vazio.'
},
emailAddress:{
message: 'O valor inserido não é um Email valido.'
},
regexp:{
regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
message: 'Email deve conter "@" e "."'
}
}
},
'tel[]':{
validators:{
notEmpty:{
message: 'O campo Telefone é obrigatório e não pode ser vazio.'
},
phone:{
country: 'BR',
message: 'Este número de Telefone não compativel com o %s Telefones.'
}
}
}
}
})
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#emailTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$email = $clone.find('[name="email[]"]');
// Add new field
$('#form-contato').formValidation('addField', $email);
})
// Add button click handler
.on('click', '.addButtonTel', function() {
var $template = $('#telTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$email = $clone.find('[name="tel[]"]');
// Add new field
$('#form-contato').formValidation('addField', $email);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
$email = $row.find('[name="email[]"]');
// Remove element containing the email
$row.remove();
// Remove field
$('#form-contato').formValidation('removeField', $email);
})
// Called after adding new field
.on('added.field.fv', function(e, data) {
// data.field --> The field name
// data.element --> The new field element
// data.emails --> The new field emails
if (data.field === 'email[]') {
if ($('#form-contato').find(':visible[name="email[]"]').length >= MAX_EMAILS) {
$('#form-contato').find('.addButton').attr('disabled', 'disabled');
}
}
})
// Called after removing the field
.on('removed.field.fv', function(e, data) {
if (data.field === 'email[]') {
if ($('#form-contato').find(':visible[name="email[]"]').length < MAX_EMAILS) {
$('#form-contato').find('.addButton').removeAttr('disabled');
}
}
});
//Telefone codigo - Phone code
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#telTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$telefone = $clone.find('[name="tel[]"]');
// Add new field
$('#form-contato').formValidation('addField', $telefone);
})
// Add button click handler
.on('click', '.addButtonTel', function() {
var $template = $('#telTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$telefone = $clone.find('[name="tel[]"]');
// Add new field
$('#form-contato').formValidation('addField', $telefone);
})
// Remove button click handler
.on('click', '.removeButtonTel', function() {
var $row = $(this).parents('.form-group'),
$telefone = $row.find('[name="tel[]"]');
// Remove element containing the phone
$row.remove();
// Remove field
$('#form-contato').formValidation('removeField', $telefone);
})
// Called after adding new field
.on('added.field.fv', function(e, data) {
// data.field --> The field name
// data.element --> The new field element
// data.emails --> The new field emails
if (data.field === 'tel[]') {
if ($('#form-contato').find(':visible[name="tel[]"]').length >= MAX_TELS) {
$('#form-contato').find('.addButtonTel').attr('disabled', 'disabled');
}
}
})
// Called after removing the field
.on('removed.field.fv', function(e, data) {
if (data.field === 'tel[]') {
if ($('#form-contato').find(':visible[name="tel[]"]').length < MAX_TELS) {
$('#form-contato').find('.addButtonTel').removeAttr('disabled');
}
}
});
});
Aucun commentaire:
Enregistrer un commentaire