首页 > 解决方案 > 如何使用 JavaScript 进行表单验证?

问题描述

我正在尝试创建一个表单,它在进入我的数据库之前检查 JavaScript 验证,基本上如果用户没有输入任何内容,则会出现警报,但是当我在浏览器中查看它时,当我没有放置任何文本时在任何文本框中并点击提交,没有警报出现,没有任何东西如果你能帮助我,我将不胜感激

HTML

<body>
<form action="update.php?eventID=<?=$contact['eventID']?>" name="myForm"  onsubmit="return validate()" method="post">

    <label for="eventTitle">Event Title</label>
    <input type="text" name="eventTitle" value="?=$contact['eventTitle']?>" id="eventTitle">

    <label for="eventDescription">Event Description</label>
    <input type="text" name="eventDescription" value="<?=$contact['eventDescription']?>" id="eventDescription">

    <label for="eventStartDate">Event Start Date</label>
    <input type="text" name="eventStartDate" value="<?=$contact['eventStartDate']?>" id="eventStartDate">

    <label for="eventEndDate">Event End Date</label>
    <input type="text" name="eventEndDate" value="<?=$contact['eventEndDate']?>" id="eventEndDate">

    <label for="eventPrice">Event Price</label>
    <input type="text" name="eventPrice" value="<?=$contact['eventPrice']?>" id="eventPrice">

    <input type="submit" value="Update">

</form> 

<script src="update.js"></script>
</body>

JavaScript

function validate() {
     if( document.myForm.eventTitle.value == "" ) {
           alert( "Please enter a Event Title" );
            document.myForm.eventTitle.focus() ;
            return false; 
         }

         if( document.myForm.eventDescription.value == "" ) {
            alert( "Please enter a event Description!" );
            document.myForm.eventDescription.focus() ;
            return false;
         }
          if( document.myForm.eventStartDate.value == "" ) {
            alert( "Please enter a event Start Date!" );
            document.myForm.eventStartDate.focus() ;
             return false;
        }
          if( document.myForm.eventEndDate.value == "" ) {
            alert( "Please enter a event End Date!" );
            document.myForm.eventEndDate.focus() ;
            return false;
        }

         if( document.myForm.eventPrice.value == "" ) {
            alert( "Please enter a event End Date!" );
            document.myForm.eventPrice.focus() ;
           return false;

         }
          return( true );
     }

标签: javascripthtml

解决方案


我在您的代码中发现的唯一错误是定义 eventTitle 的行中问号前缺少一个小符号 修复错字,尝试清除浏览器缓存,并尝试按 F12 访问调试信息以更好地了解发生了什么问题。


推荐阅读