0

所以我正在创建一个网站，在其中我需要一个购物车。现在，当我到达用户必须输入详细信息的结帐时，javascript 将无法工作。

我需要对每个字段进行某些验证，例如每个字段都被填写，字母仅在名称中，地址至少有 20 个字符等等。

问题是这样的，当我尝试在内部（在同一页面内）执行该功能时，它运行良好，当我尝试从另一个名为 validateForm.js 的外部文件中获取它时，它根本不起作用。

这是出于分配目的，其中一项要求是将所有 JS 放在一个单独的文件中。

这是 checkout.php 的一部分（将在其中添加详细信息）

Checkout.php 的一部分

<div class="overview">
        <h1> Please make sure that the order is correct before entering the details and proceeding for Checkout.</h1>

    </div>
</div>


    <div class="form">
        <form name="sendEmail" action="sendEmail.php" onsubmit="return checkEmpty()" method ="post">
            <table class="tablealign" id="tablecheckout">

            <th>Fill in All Details</th><th></th>
            <tr><td>Name:*</td>         <td><input type="text" name="name"></td></tr>
            <tr><td>Surname:*</td>      <td><input type ="text" name="surname"></td></tr>
            <tr><td>Address:*</td>      <td><input type ="text" name="address"></td></tr>
            <tr><td>Town:*</td>         <td><input type ="text" name="town"></td></tr>
            <tr><td>Telephone:*</td>        <td><input type ="text" name="Telephone"></td></tr>

            </table>

        <input id="submit" type="submit" value="Confirm Checkout">  
        </form>
        </div>

现在函数可以在 validateForm.js 中找到，其中的函数是：

验证表单.js

//To check that ALL characters are letters


function allLetters(input)  
    {   
        var letters = /^[A-Za-z]+$/;  
        if(input.value.match(letters))  
        {  
            return true;  
        }  
        else  
        {  
            alert('Only LETTERS are allowed in the Name');  
            document.sendForm.email.focus();
            return false;  
        }  

    }  

//To check that ALL characters are numbers

function allNumbers(input)
    {

        var numbers = /^[0-9]+S/;
        if (input.value.match(numbers))
        {
            return true;
        }
        else
        {
            alert ('Only Numbers are allowed in the Mobile Field');
            document.sendForm.mobile.focus();
            return false;
        }
    }

// Check Validity of Email
function checkEmail()
{
        var x = document.forms["sendForm"]["email"].value;
        var atPosX= x.indexOf("@");
        var dotPosX = x.indexOf(".");

        if (atposX<1 || dotPosX < atPostX+2 || dotPosX+2 >= x.length)
        {
            alert("Please Provide a Valid E-Mail Address");
            document.sendForm.email.focus();
            return false;
        }
        else
        {
            return true;    
        }
    }

// Check whether every field is filled
function checkEmpty()
{
    var name = document.forms["sendForm"]["name"].value;
    var surname = document.forms["sendForm"]["surname"].value;
    var address = document.forms["sendForm"]["address"].value;
    var town = document.forms["sendForm"]["town"].value;
    var telephone = document.forms["sendForm"]["telephone"].value;

        if (name == null || name == "" || surname== "" || surname == null || address == null || address == "" || telephone == null || telephone == "" || town == null || town == "")
        {
            alert ("ALL Fields are to be filled in");
            return false;
        }
        else
        {
            return true;
        }
}

//Check that the Address is longer than 20 characters

function checkAddress()
{
    if (document.forms.sendForm.address.value.length < 20)
    {
        alert ('Address must be AT LEAST 20 characters long');
        return false;
    }
    else
    {
        return true;
    }
}

在checkout.php HEAD 标记中有这样的：

<head> 
    <title> USA Women's Soccer Team Unofficial Website| Checkout PAGE   </title>
    <meta name="keywords" content="HTML,CSS,XML, JavaScript">
    <meta name="description" content="USWNT Unofficial Website News and Players Homepage News ">
    <link rel="stylesheet" type="text/css" href="GeneralBackground.css">
    <script type ="text/javascript" src="validationForm.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
</head>

NB sendEmail.php 现在只是一个空白页面，因为它还没有被开发，但我感到困惑的是内部工作但另一个文件中的功能完全被忽略了。

如果您能给我一些提示，这可能是导致此问题的原因，我将不胜感激

4

0 回答 0