Question

我用html5验证我的表单，然后当需求字段被填充时，我想要一个函数，该函数将被触发并更改名称按钮并使其他字段出现，我得到了下一个代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<script src="../../js/popper.min.js"></script>
<script src="../../js/jquery.js"></script>
<script src="../../js/bootstrap.min.js"></script>

<SCRIPT LANGUAJE='JavaScript'>


        $("#formu").submit(function(){


            var nomConcesionario = $("#nomConcesionario").val();


            //Validamos que ningún campo este vacio
            if( !nomConcesionario ){

                $("#switching").addClass("d-none");     
                var valor = document.getElementById('bEnviar');
                valor.innerText = "Modificar concesionario";            


            }else{
                $("#switching").removeClass("d-none");
                var valor = document.getElementById('bEnviar');
                valor.innerText = "Mostrar datos";              
            }

            //Si estan todos los campos obligatorios entra
            if( nomConcesionario && cifConcesionario && nomCiudad && nomAdministrador ){

            }

        });



</SCRIPT>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="../../css/bootstrap.css">
<link rel="stylesheet" href="../../css/submenu.css">
</head>
<body>

    <!Formulario-->
<div class="modal-dialog">
    <div class="modal-content">
        <form id="formu" method="post">
            <div class="row">
                <div class="form-group col-md-12">
                    <label for="nombre" class="col-form-label">Nombre Concesionario(*)</label>
                    <input type="text" class="form-control" id="nomConcesionario" placeholder="Nombre Concesionario" pattern="[A-Za-z0-9]{4,60}" required>
                    <div id="errorNomConce" class="alert alert-danger d-none" role="alert-danger">
                        Inserte concesionario
                    </div>
                </div>

            </div>
        <span id="switching" class="d-none">    
            <div class="row">
                <div class="form-group col-md-6" >
                    <label for="ciudad" class="col-form-label">Ciudad(*)</label>
                    <input type="text" class="form-control" id="nomCiudad" placeholder="Ciudad" required="">
                </div>
                <div class="form-group col-md-6">
                    <label for="cp" class="col-form-label">Codigo Postal</label>
                    <input type="text" id="cpConcesionario" placeholder="Codigo Postal" class="form-control">
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6" >
                    <label for="ciudad" class="col-form-label">Telefono Contacto</label>
                    <input type="text" class="form-control" id="tlf" placeholder="Telefono Contacto">
                </div>
                <div class="form-group col-md-6">
                    <label for="nom_admin" class="col-form-label">Nombre Administrador(*)</label>
                    <input type="text" id="nomAdministrador" placeholder="Nombre Administrador" class="form-control" required>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="cif" class="col-form-label">CIF(*)</label>
                    <input type="text" class="form-control" id="cifConcesionario" placeholder="CIF" required>
                </div>
            </div>
        </span>
            <div class="row form-group col-md-12">
                <button type="submit" id="bEnviar" class="btn btn-primary">Mostrar datos</button>
            </div>

        </form> 
    </div>
</div>


</body>
</html>

不被调用的函数不知道为什么。我已经检查了chrome控制台，并收到“无法集中处理带有name =”的无效表单控件。”

谢谢！

Answer 1

您可以将整个脚本从<head>移动到<body>的末尾。

这将导致javascript在创建表单后运行。这样可以防止您在Chrome控制台中看到该错误。

还，您是要使用onsubmit而不是submit吗？

提交表单后验证表单-Javascript

1 个答案: