Question

由于某些原因，这不起作用，它如此简单，我看到这个工作的一百万个例子。这是基本的验证，只是为了看看他们是否没有点击其中一个示例而不提交表单。我对第一个，姓氏和电子邮件进行了验证。我将使用此功能验证文本区域。

*********************** EDITED *********************** * ***************所以我添加了更多的代码，所以你们可以更好地看到问题。注意：脚本和其他位置的某些代码已被修改。我将添加一个CODECHANGED，以便您知道它是故意的错误。此外，CSS是巨大的，大多是不必要的，我相信你可以猜到这里发生了什么。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Title Undetermined</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" href="images/hammerFavicon.ico" type="image/gif">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" CODECHANGED >
    <link rel="stylesheet" href = "css/custom/siteStyle.css">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" CODECHANGED ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" CODECHANGED "></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" CODECHANGED ></script>
    <script src="js/main.js"></script>
</head>


<body>

    <!-- Header include -------------------------------------------------------------------------------------- -->
    <?php include("includes/header.php"); ?>

    <!-- Navigation include ---------------------------------------------------------------------------------- -->
    <?php include("includes/navigation.php"); ?>

    <!-- Main Content section -------------------------------------------------------------------------------- -->
    <main role="main" class="container">



        </div> 

          <div class="jumbotron">

            <!-- Paragraph for text if needed ---------------------------------------------------------------- -->

            <p class="lead">

                <h2>Ask Us A Question</h2>
                <br />
                <!-- Question submission form ---------------------------------------------------------------- -->
                <form id="myForm" action="" onsubmit="return validForm()">

                        <div class="form-group">
                        <div class="col">
                            <label for="fN">First Name</label>
                                <input type="text" onblur="validateName(fN)" class="form-control" placeholder="First Name" id="fN">
                        </div>
                        </div>
                        <!--Last Name -------------->
                        <div class="form-group">
                        <div class="col">
                            <label for="lN">Last Name</label>
                                <input type="text" onblur="validateName(lN)" class="form-control" placeholder="Last Name" id="lN">
                        </div>
                        </div>

                        <!-- Email -->
                        <div class="form-group">
                        <div class="col">
                            <label for="eMail">Email</label>
                                <input type="email" onblur="validateEmail(eMail)" class="form-control" placeholder="Email" id="eMail">
                        </div>
                        </div>
                        <br/>

                        <!--Question Topic----------------------------------------------------------------------->
                        <h5>Select Question Category</h5>
                        <div class="form-group form-control">
                        <select id="qCategory" required>
                            <option selected>Select Category</option>
                            <option></option>
                            <option></option>
                            <option></option>
                            <option></option>
                        </select>

                        <br>
                        <br>


                        <!-- Question Details text field ------------------------------------------------------ -->
                        <h5>Enter your question:</h5>
                        <div class="form-group">
                        <textarea id="txtArea" class="form-control" rows = "6" cols = "65"></textarea>
                        </div>
                        <br>    
                    </div>
                    <br />
                    <div class="form-group">                    
                    <div>
                        <h5 id="formError">Please fill in entire form</h5>
                        <button onclick="return validForm()" type="submit" class="button button-block" id="cTModal">Create Ticket</button>
                    </div>
                </form> 
            </p>


          </div>
    </main> 

    <!-- Footer include -------------------------------------------------------------------------------------- -->
    <?php include("includes/footer.php"); ?>

</body>

</html>

-------- BEGIN JAVASCRIPT -------------------------------------

//Checks if user has pressed update without entering fields
function validateName(x){
    var re = /[A-Za-z]$/;

    if (x.value == ""){
        x.style.background = '#e35152';
        x.style.color = 'white';
        fN.value = "Please enter your first name";  
        lN.value = "Please enter your last name";
        return false;
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "Please use only characters";
                    return false;
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            return true;
                            }
                }
}


function validateEmail(x){
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (x.value == ""){
        x.style.background = '#e35152';
        x.style.color = 'white';
        x.value = "Please fill in email";
        return false;   
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "You must enter a valid email";
                    return false;
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            return true;
                            }
                }   
}


function validForm(){

var eMail = document.getElementById('eMail').value;
var lastName = document.getElementById('fN').value;
var firstName = document.getElementById('lN').value;
var formError = document.getElementById('formError');

    if(firstName == ''){
        formError.style.display = 'block';
        return false;
            } else if (lastName == ''){  
                formError.style.display = 'block';
                return false;
                    } else if (eMail == ''){
                        formError.style.display = 'block';
                        return false;
                            } else {
                                formError.hide();
                                return true;
                            }
}

Answer 1

我注意到的第一件事是你的formError变量是formError元素的值而不是元素本身。所以你对.style的调用会失败。

使用onclick onsubmit w / button进行javascript表单验证

1 个答案: