Poner una alerta validando con Jquery

[Sumerio]

Hola a todos, tengo una consulta, quiero validar mi formulario antes grabar, pero me refiero a una validacion de alerts, quiero algo asi, si tengo dos texboxs, que no estan llenos, me salga un alert con listando que los dos campos son requeridos, pero un alert con mas perfomance.

Hace algun tiempo, encontre una validacion como esta, pero no pude implementarlo porque no tenia las librerias jquery:

Código:

<script language="javascript">
 
function grabar(){
             
            if($("#form_base").validate()) {
                var msg='';

                var f = document.forms[0];
                
                if(document.all('bean.nmroExpdntePrlmnar').value == ''){
                        msg+='<br/>- Número Registro Informe Preliminar.';
                }
                if(document.all('bean.fchaExpdntePrlmnar').value == ''){
                        msg+='<br/>- Fecha Registro Informe Preliminar.';
                }
                                 
                if(msg!=''){
                    var finalMsg='<p>'
                    finalMsg+='Los siguientes campos son obligatorios:';
                    finalMsg+=msg;
                    finalMsg+='</p>'
                    $('#msg').html(finalMsg);
                    $('#msg').dialog({
                        autoOpen: false,
                        width: 400,
                        modal : true,
                        title : 'Alerta',
                        buttons: {
                            "Aceptar": function() { 
                                $(this).dialog("close"); 
                            }
                        }
                    });
                    $('#msg').dialog('open');

                }else if($("#form_base").valid()){
                    
                    f.action = "${ctx}"+myBasePath+"grabarRegistro.action?forward=pestanaFinal";
                    f.submit();

                }
            }else{
                 $('#msg').html('<p>Debe ingresar los campos correctamente</p>');
                    $('#msg').dialog({
                        autoOpen: false,
                        width: 400,
                        modal : true,
                        title : 'Alerta',
                        buttons: {
                            "Aceptar": function() { 
                                    $(this).dialog("close"); 
                            }
                        }
                    });
                    $('#msg').dialog('open');
             }              
        }    

       function myOnReadyFn(){
                        $("#criterioBusqueda").accordion({ header: "div>:first",autoHeight: false });
                        $("#resultadoBusqueda").accordion({ header: "div>:first",autoHeight: false });
                        $( "input:submit, a, button", ".demo" ).button();
                        $( "#cbxUnidadFis" ).combobox({width:300, inputId :'inputCbxUnidadFis'});                 
                        $( "#cbxTtipo" ).combobox();
                        $( "#IGdtpFechaRegistroInformePreliminar" ).datepicker($.datepicker_es);
                };

</script>

<form  theme="simple" id="form_base">

<input type="text" id="DRdtpFechaRegistroInformePreliminar"  name="bean.drFchaEmision" cssClass="text ui-widget-content ui-corner-all" cssStyle="width:100"  size="50"/>

</form>

[djaevi]

A que re referis con alerts con mas performance? en si podes hacer 2 cosas una funcion que vaya concatenando errores en una variable y luego haga un alert o podes crear un div invisible y mostrarlo si hay errores simulando un alert pero claro al div podes darle un ejor diseño si es a eso a lo que te refieres con performance:

Opcion con alerts:

Código Javascript:

function validar() {
    var errores = "";
    var formulario = document.getElementById("myForm");
    if (formulario.campoX == "") {
        errores += "El campo X es requerido\n";
    }
    if (formulario.campoY == "") {
        errores += "El campo Y es requerido\n";
    }
    alert(errores);
}
 

Opcion con html:

Código Javascript:

function validar() {
    var errores = "";
    var formulario = document.getElementById("myForm");
    var divOculto = document.getElementById("divOculto");
    if (formulario.campoX == "") {
        errores += "<p>El campo X es requerido</p>";
    }
    if (formulario.campoY == "") {
        errores += "<p>El campo Y es requerido</p>";
    }
    divOculto.innerHTML = "";
    divOculto.innerHTML = errores;
    divOculto.style.display = "block";
}
 

Código HTML:

<div id="divOculto" style="display:none;"></div>
<form id="myForm" method="post" action="archivo">
<input type="text" name="campoX">
<input type="text" name="campoY">
</form>
 

Prueba si te funciona

Saludos

[Sumerio]

Asi es, pero con jquery alguien tiene otra alternativa.

[beguem]

con jquery me parece que seria asi:

Código:

$(document).ready(function(){
$("#campox").change(function(){if ($(this)=="") {
alert('El campo X es requerido');
}});
$("#campoy").change(function(){if ($(this)=="") {
alert('El campo Y es requerido');
}});
});

y con un input asi

Código:

$(document).ready(function(){
$("#terminar").click(function(){if ($("#campox")=="") {
alert('El campo X es requerido');
}
if ($("#campoy")=="") {
alert('El campo Y es requerido');
}});
});

Código HTML:

<form id="myForm" method="post" action="archivo">
<input type="text" id="campox">
<input type="text" id="campoy">
<input type="submit" value="terminar" id="terminar">
</form>