Execute Script without invalidating the required property in an HTML document

Question

Execute Script without invalidating the required property in an HTML document

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I am running a script referenced in an HTML document and everything works very well, except the validation of the inputs in the form

I'm trying something like this:

<!--Documento index.html-->
<!DOCTYPE html>
<html lang="es-co">
<head>
    <meta charset="utf-8"/>
    <title>Documento Prueba</title>
</head>
<body>  
<form name="formulario" id="form1" autocomplete="off">
        <label>Valor</label>
        <input type="text" id="valor" placeholder="Digita un valor" required/>
        <input type="submit" id="subcapturar" value="Capturar">
 </form>
 <div id="mensaje"></div>
 <script type="text/javascript" src="js/jquery-3.2.1.js"></script>  
 <script type="text/javascript" src="js/main.js"></script>  
 </body>
 </html>

The JS code:

 //Documento main.js
 $("#subcapturar").click(function(event){
     var mivalor=$("#valor").val();
     $("#mensaje").text("El valor capturado fue :" + mivalor);
     event.preventDefault();
 });

This script works well, the problem is that the sending is done without performing the required validation of the input id = value.

Try changing the event in JS

 $("#form1").submit(function(event){
    var mivalor=$("#valor").val();
    $("#mensaje").text("El valor capturado fue :" + mivalor);
});

More did not work. Does anyone have a solution?

I do not see that this is failing in my logic Thanks for the help

javascript jquery html5

asked by Diego Fernando Barrios Olmos 18.05.2017 в 05:17

source

2 answers

0

What is happening is that you are not invoking the listening of your button at any time. For this you need to change your main.js to something like this:

$(function() {
    $("#subcapturar").click(function(event){
        var mivalor=$("#valor").val();
        $("#mensaje").text("El valor capturado fue :" + mivalor);
    });
});

This way it will work, I already tried it.

One more thing, since your form of your html did not specify action, then it will not let you read your message. If you want to be able to read the message, your html could look like this:

<!--Documento index.html-->
<!DOCTYPE html>
<html lang="es-co">
<head>
    <meta charset="utf-8"/>
    <title>Documento Prueba</title>
</head>
<body>  
<form name="formulario" id="form1" autocomplete="off" action="#">
        <label>Valor</label>
        <input type="text" id="valor" placeholder="Digita un valor" required/>
        <input type="submit" id="subcapturar" value="Capturar">
 </form>
 <div id="mensaje"></div>
 <script type="text/javascript" src="js/jquery-3.2.1.js"></script>  
 <script type="text/javascript" src="js/main.js"></script>  
 </body>
 </html>

Greetings and I hope it serves you.

answered by 18.05.2017 в 05:41

Keep selected button after opening dialog which was done with an Activity help login android studio, does not show values of $ user because it is not a JSONobject

score 0 · Accepted Answer

You must use the preventDefault() method, and after the validation is done if necessary, you send the form with the submit() method.

Example:

//Documento main.js
function validar() {

 event.preventDefault();    // previene que el formulario sea enviado

 var mivalor=$("#valor").val();
 $("#mensaje").text("El valor capturado fue :" + mivalor);

 // aquí colocas el envío del formulario formName.submit() (de ser necesario)
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="formulario" id="form1" autocomplete="off" onSubmit="validar()">
        <label>Valor</label>
        <input type="text" id="valor" placeholder="Digita un valor" required/>
        <input type="submit" id="subcapturar" value="Capturar">
 </form>
 <div id="mensaje"></div>