Skip to main content
Mejorando gramática y formato. Cambiando título. Indentando código. Unifico los snippets.
Origen Enlace
user13558
user13558

Con Javascript necesito que si los Enviar datos del formulario estan todos bien, recién ahí los envíe al controlador al ser correctos - JavaScript

Tengo una función en javascriptJavaScript que chekeachekea si hay inputs vacios onkeyup, siinputs vacíos onkeyup. Si los hay me avisa con un alertalert, y también tengo una función que cuando pulsa el botón guardar, comprueba que dos campos ingresen la misma contraseña. 

El problema estaestá en que si yo dejo todos los campos vacíos y solo completo los campos para poner las mismas contraseñas y pulso el botón GuardarGuardar, me envía esos datos vacíos. Yo quiero que al pulsar el btn guardarbotón Guardar cumpla con la funciones de javascriptJavaScript.

Aca el formularioCódigo completo:

@using (Html.BeginForm("RegistrarUsuario", "Usser", FormMethod.Post, new { name = "f1" }))
{
    <div class="form-group">
            <label for="lblUserName">Nombre de usuario:</label>
            <input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
        </div>
        <div class="form-group">
            <label for="lblPwd">Contraseña:</label>
            <input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
        </div>
        <div class="form-group">
            <label for="lblPwd">Repita la contraseña:</label>
            <input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
        </div>
        <div class="form-group">
            <label for="lblDom">Domicilio:</label>
            <input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
        </div>
        <button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
}

aca javascript

<script type="text/javascript">

    function comprobarClave() {

        validarCamposInput();

        clave1 = document.f1.txtClave1.value
        clave2 = document.f1.txtClave2.value

        if (clave1 != clave2)
            alert("Las dos contraseñas son distintas!.\nLas contraseñas deben ser iguales!")
        else
            document.f1.submit()//pulsa el submit y manda los datos del form

        //validarCamposInput();

        //Other Sentences
    }

    var mensajeCabecera = "Los siguientes campos están vacíos:\n";
    var mensajeValidacion = "";

    function validarCamposInput() {
        mensajeValidacion = "";

        $(".form-group > input").each(function () {
            if (this.value == "") {
                mensajeValidacion = mensajeValidacion + (this.id).replace("txt", "") + "\n";
                $("#" + this.id).addClass('bordeRojoValidacion');
            }
        });

        if (mensajeValidacion == "") {
            return;
        }
        else {
            alert(mensajeCabecera + mensajeValidacion);
        }
    }
 
    function validarInput(caracter) {
        if (caracter != "") {
            $("#" + caracter.id).removeClass('bordeRojoValidacion');
        }
    }

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="f1">
  @using (Html.BeginForm("RegistrarUsuario", "Usser", FormMethod.Post, new { name = "f1" }))
  {
    <div class="form-group">
      <label for="lblUserName">Nombre de usuario:</label>
      <input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
    </div>
    <div class="form-group">
      <label for="lblPwd">Contraseña:</label>
      <input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
    </div>
    <div class="form-group">
      <label for="lblPwd">Repita la contraseña:</label>
      <input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
    </div>
    <div class="form-group">
      <label for="lblDom">Domicilio:</label>
      <input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
    </div>
    <button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
  }
</form>

Con Javascript necesito que si los datos del formulario estan todos bien, recién ahí los envíe al controlador

Tengo una función en javascript que chekea si hay inputs vacios onkeyup, si los hay me avisa con un alert, y también tengo una función que cuando pulsa el botón guardar, comprueba que dos campos ingresen la misma contraseña. El problema esta en que si yo dejo todos los campos vacíos y solo completo los campos para poner las mismas contraseñas y pulso el botón Guardar, me envía esos datos vacíos. Yo quiero que al pulsar el btn guardar cumpla con la funciones de javascript.

Aca el formulario:

@using (Html.BeginForm("RegistrarUsuario", "Usser", FormMethod.Post, new { name = "f1" }))
{
    <div class="form-group">
            <label for="lblUserName">Nombre de usuario:</label>
            <input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
        </div>
        <div class="form-group">
            <label for="lblPwd">Contraseña:</label>
            <input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
        </div>
        <div class="form-group">
            <label for="lblPwd">Repita la contraseña:</label>
            <input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
        </div>
        <div class="form-group">
            <label for="lblDom">Domicilio:</label>
            <input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
        </div>
        <button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
}

aca javascript

<script type="text/javascript">

    function comprobarClave() {

        validarCamposInput();

        clave1 = document.f1.txtClave1.value
        clave2 = document.f1.txtClave2.value

        if (clave1 != clave2)
            alert("Las dos contraseñas son distintas!.\nLas contraseñas deben ser iguales!")
        else
            document.f1.submit()//pulsa el submit y manda los datos del form

        //validarCamposInput();

        //Other Sentences
    }

    var mensajeCabecera = "Los siguientes campos están vacíos:\n";
    var mensajeValidacion = "";

    function validarCamposInput() {
        mensajeValidacion = "";

        $(".form-group > input").each(function () {
            if (this.value == "") {
                mensajeValidacion = mensajeValidacion + (this.id).replace("txt", "") + "\n";
                $("#" + this.id).addClass('bordeRojoValidacion');
            }
        });

        if (mensajeValidacion == "") {
            return;
        }
        else {
            alert(mensajeCabecera + mensajeValidacion);
        }
    }
 
    function validarInput(caracter) {
        if (caracter != "") {
            $("#" + caracter.id).removeClass('bordeRojoValidacion');
        }
    }

</script>

Enviar datos del formulario al controlador al ser correctos - JavaScript

Tengo una función en JavaScript que chekea si hay inputs vacíos onkeyup. Si los hay me avisa con un alert, y también tengo una función que cuando pulsa el botón guardar, comprueba que dos campos ingresen la misma contraseña. 

El problema está en que si yo dejo todos los campos vacíos y solo completo los campos para poner las mismas contraseñas y pulso el botón Guardar, me envía esos datos vacíos. Yo quiero que al pulsar el botón Guardar cumpla con la funciones de JavaScript.

Código completo:

function comprobarClave() {

  validarCamposInput();

  clave1 = document.f1.txtClave1.value
  clave2 = document.f1.txtClave2.value

  if (clave1 != clave2)
    alert("Las dos contraseñas son distintas!.\nLas contraseñas deben ser iguales!")
  else
    document.f1.submit()//pulsa el submit y manda los datos del form

  //validarCamposInput();

  //Other Sentences
}

var mensajeCabecera = "Los siguientes campos están vacíos:\n";
var mensajeValidacion = "";

function validarCamposInput() {
  mensajeValidacion = "";

  $(".form-group > input").each(function () {
    if (this.value == "") {
      mensajeValidacion = mensajeValidacion + (this.id).replace("txt", "") + "\n";
      $("#" + this.id).addClass('bordeRojoValidacion');
    }
  });

  if (mensajeValidacion == "") {
    return;
  }
  else {
    alert(mensajeCabecera + mensajeValidacion);
  }
}
function validarInput(caracter) {
  if (caracter != "") {
    $("#" + caracter.id).removeClass('bordeRojoValidacion');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="f1">
  @using (Html.BeginForm("RegistrarUsuario", "Usser", FormMethod.Post, new { name = "f1" }))
  {
    <div class="form-group">
      <label for="lblUserName">Nombre de usuario:</label>
      <input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
    </div>
    <div class="form-group">
      <label for="lblPwd">Contraseña:</label>
      <input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
    </div>
    <div class="form-group">
      <label for="lblPwd">Repita la contraseña:</label>
      <input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
    </div>
    <div class="form-group">
      <label for="lblDom">Domicilio:</label>
      <input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
    </div>
    <button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
  }
</form>
se añadieron 111 caracteres en el cuerpo
Origen Enlace
Claudio
  • 1k
  • 1
  • 15
  • 40
@using (Html.BeginForm("RegistrarUsuario", "Usser", FormMethod.Post, new { name = "f1" }))
{
    <div class="form-group">
            <label for="lblUserName">Nombre de usuario:</label>
            <input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
        </div>
        <div class="form-group">
            <label for="lblPwd">Contraseña:</label>
            <input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
        </div>
        <div class="form-group">
            <label for="lblPwd">Repita la contraseña:</label>
            <input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
        </div>
        <div class="form-group">
            <label for="lblDom">Domicilio:</label>
            <input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
        </div>
        <button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
}
<div class="form-group">
            <label for="lblUserName">Nombre de usuario:</label>
            <input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
        </div>
        <div class="form-group">
            <label for="lblPwd">Contraseña:</label>
            <input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
        </div>
        <div class="form-group">
            <label for="lblPwd">Repita la contraseña:</label>
            <input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
        </div>
        <div class="form-group">
            <label for="lblDom">Domicilio:</label>
            <input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
        </div>
        <button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
@using (Html.BeginForm("RegistrarUsuario", "Usser", FormMethod.Post, new { name = "f1" }))
{
    <div class="form-group">
            <label for="lblUserName">Nombre de usuario:</label>
            <input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
        </div>
        <div class="form-group">
            <label for="lblPwd">Contraseña:</label>
            <input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
        </div>
        <div class="form-group">
            <label for="lblPwd">Repita la contraseña:</label>
            <input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
        </div>
        <div class="form-group">
            <label for="lblDom">Domicilio:</label>
            <input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
        </div>
        <button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
}
Origen Enlace
Claudio
  • 1k
  • 1
  • 15
  • 40

Con Javascript necesito que si los datos del formulario estan todos bien, recién ahí los envíe al controlador

Tengo una función en javascript que chekea si hay inputs vacios onkeyup, si los hay me avisa con un alert, y también tengo una función que cuando pulsa el botón guardar, comprueba que dos campos ingresen la misma contraseña. El problema esta en que si yo dejo todos los campos vacíos y solo completo los campos para poner las mismas contraseñas y pulso el botón Guardar, me envía esos datos vacíos. Yo quiero que al pulsar el btn guardar cumpla con la funciones de javascript.

Aca el formulario:

<div class="form-group">
            <label for="lblUserName">Nombre de usuario:</label>
            <input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
        </div>
        <div class="form-group">
            <label for="lblPwd">Contraseña:</label>
            <input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
        </div>
        <div class="form-group">
            <label for="lblPwd">Repita la contraseña:</label>
            <input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
        </div>
        <div class="form-group">
            <label for="lblDom">Domicilio:</label>
            <input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
        </div>
        <button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>

aca javascript

<script type="text/javascript">

    function comprobarClave() {

        validarCamposInput();

        clave1 = document.f1.txtClave1.value
        clave2 = document.f1.txtClave2.value

        if (clave1 != clave2)
            alert("Las dos contraseñas son distintas!.\nLas contraseñas deben ser iguales!")
        else
            document.f1.submit()//pulsa el submit y manda los datos del form

        //validarCamposInput();

        //Other Sentences
    }

    var mensajeCabecera = "Los siguientes campos están vacíos:\n";
    var mensajeValidacion = "";

    function validarCamposInput() {
        mensajeValidacion = "";

        $(".form-group > input").each(function () {
            if (this.value == "") {
                mensajeValidacion = mensajeValidacion + (this.id).replace("txt", "") + "\n";
                $("#" + this.id).addClass('bordeRojoValidacion');
            }
        });

        if (mensajeValidacion == "") {
            return;
        }
        else {
            alert(mensajeCabecera + mensajeValidacion);
        }
    }

    function validarInput(caracter) {
        if (caracter != "") {
            $("#" + caracter.id).removeClass('bordeRojoValidacion');
        }
    }

</script>