tengo que hacer un proyecto donde si selecciono tarjeta me aparezca el campo para introducir el numero y si elijo paypal desaparezca ese campo y aparezca para introuducir el email. Luego tengo que validar los campos
<div class="row">
<div class="form-group col-xs-18 col-sm-10 col-md-88">
<label for="payment">Tipo de tarjeta: *</label>
<select id="prueba">
<option value="VISA" id="visa">VISA</option>
<option value="Mastercard" id="mcard">Mastercard</option>
<option value="Paypal" id="paypal">Paypal</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group CVV col-xs-18 col-sm-10 col-md-8">
<label for="ccv">Numero de tarjeta *</label>
<input type="text" id="cc-number" name="cc_number" class="form-inline"
placeholder="9999-9999-9999-9999" minlength="16" maxlength="16" required>
</div>
</div>
Este es mi código de script
$(document).ready(function () {
$('#registration').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 3,
max: 15,
message: 'The username must be more than 3 and less than 15 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The username can only consist of alphabetical and number'
},
different: {
field: 'password',
message: 'The username and password cannot be the same as each other'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
},
emailAddress: {
message: 'The email address is not a valid'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
},
stringLength: {
min: 8,
max: 15,
message: 'The password must have at least 8 characters and maximum 15'
}
}
},
cc_number: {
validators: {
creditCard: {
message: 'The credit card number is not valid'
}
}
},
email_paypal: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
},
emailAddress: {
message: 'The email address is not a valid'
}
}
}
}
});
$('#prueba').change(function () {
if ($(this).val() == "VISA") {
$('cc-number').show();
$('expiration-date').show();
$('email-paypal').hide();
$('validar').show();
} else if ($(this).val() == "Mastercard") {
{
$('cc-number').show();
$('expiration-date').show();
$('email-paypal').hide();
$('validar').show();
}
}
else {
$('cc-number').hide();
$('expiration-date').hide();
$('email-paypal').show();
$('validar').show();
}
});
$('#prueba').trigger("change");
});
</script>
Para validar he usado un validador de bootstrap pues con javascript me daba errores.
La parte de cambiar no me funciona y no veo errores con el inspeccionar elemento y ya no sé que hacer para que me ejecute ambas, he probado hacer un script solo de eso al inicio y tampoco, estoy muy perdido la verdad.
Gracias de antemano.