Jquery + Cuando todos los campos previos (botones de opción, selección y cuadro de texto) se rellenan, se agrega un nuevo cuadro: javascript, jquery

Esta es mi salida html.

Cuando el usuario hace clic en el ícono + (Agregar pestaña), entonces cómo verificar que los campos previos estén llenos o no Si alguno de los campos está vacío, aparecerá un mensaje de error.

jQuery(".add-contact").click(function (e) {
e.preventDefault();
// check previous box is field or not

{check code}

var siteUrl = jQuery(this).data("url");
var productId = jQuery(this).data("id");
var id = jQuery(".nav-tabs").children().length; //think about it ;)
var tabId = "personalize_" + id;
jQuery(this).closest("li").before("<li><a href="#personalize_" + id + "">Personalize</a> <span> x </span></li>");

var DataPersionalize  = "<div class="tab-pane" id="" + tabId + "">";


DataPersionalize += "</div>";

// append data
jQuery(".tab-content").append(DataPersionalize);


jQuery(".nav-tabs li:nth-child(" + id + ") a").click();
});

Cómo es posible en caso de botón de radio.

Gracias

Respuestas

Puede crear una declaración if else con todoslos elementos en el condicional original separados por && y compruebe si cada uno de sus campos de entrada tiene un valor con una longitud> 0 y para el botón de opción $(".radio_button").is(":checked")) Si todos pasan, puede abrir la pestaña. Si no pasan, puedes $(".error-div").html("<div>Error Message</div>")

En caso de que sus botones de radio estén todos en un grupo llamado ring y solo uno es seleccionable:

var isChecked = false,
radios = document.getElementsByName("ring");
for(radio in radios) {
isChecked = radios[radio].checked || isChecked;
}
console.log(isChecked);

HTML:

<input type="radio" id="ring1" name="ring">
<input type="radio" id="ring2" name="ring">

En caso de que se pueda seleccionar más de uno, se puede usar la misma solución, siempre que obtenga la colección de requisitos en la variable radios, digamos, si usas una clase rings:

var radios = document.getElementsByClassName("rings");

HTML:

<input type="radio" id="ring1" class="rings">
<input type="radio" id="ring2" class="rings">