Question

我的其他验证工作正常，如果我在其中一个输入上放置一个onchange（）函数并且只是将我的图像文件验证然后它似乎工作但是当我将相同的代码粘贴到onsubmit =“return validate（） “功能当我按下提交值不好时，它只是提交表单并转到下一页。

我猜测有一个错误，我在chrome中检查了控制台，但没有任何东西出现，即使用javascript进行错误处理也不是很好，所以也许我错过了一些东西。这是我的代码，输入字段验证工作正常。

这是一个小提琴，但我无法让它工作，所以不确定小提琴是否适合表格，我已经在浏览器中检查了下面这个确切的代码，它验证了4个输入字段但是当太像是不是它提交的有效图像。 http://jsfiddle.net/FTV5p/4/

<form id="fm-form" name="fm-form" onsubmit="return validate()" method="post" action="#" enctype="multipart/form-data">

<fieldset>
<legend>Personal information</legend>
<label for="fm-username">* Username:</label>
<input name="fm-username" id="fm-username" type="text" />
<label for="fm-email">* Email:</label>
<input id="fm-email" name="fm-email" type="text" />
</fieldset>

<fieldset>
<legend>Information</legend>
<label for="fm-tool_name">* Tool Name:</label>
<input id="fm-tool_name" name="fm-tool_name" type="text" />

<label for="fm-tool_desc">* Description:</label>
  <textarea rows="4" cols="50" id="fm-tool_desc" name="fm-tool_desc" /></textarea>

  <label for="fm-tool_game_type">* Game Type:</label>
  <select id="fm-tool_game_type" name="fm-tool_game_type">
    <option value="All" selected="selected">All Tool Game Types</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
  </select>

  <label for="fm-tool_table_type">* Table Type:</label>
  <select  id="fm-tool_table_type" name="fm-tool_table_type">
    <option value="All" selected="selected">All Table Types</option>
    <option value="Flat">Flat</option>
    <option value="Round">Round</option>
  </select>

  <label for="fm-tool_table_size">* Table Size:</label>
  <select id="fm-tool_table_size" name="fm-tool_table_size">
    <option value="All" selected="selected">All Table Sizes</option>
    <option value="1ft">1 foot</option>
    <option value="3ft">3 foot</option>
    <option value="6ft">6 foot</option>
  </select>

  <label for="fm-tool_file">* Tool File:</label>
  <input id="fm-tool_file" name="fm-tool_file" type="file" />
  <label for="fm-tool_image">* Tool Image:</label>
  <input id="fm-tool_image" name="fm-tool_image" type="file" />
</fieldset>

<div id="sub">
  <input id="upload_tool" name="upload_tool" value="Submit tool" type="submit" />
</div>

Javascript

function validate()
{
   if( document.getElementById('fm-username').value == "" || document.getElementById('fm-username').length < 4 || document.getElementById('fm-username').value > 20){
     alert( "The username should be between 4 and 20 characters!" );
     document.getElementById('fm-username').focus() ;
     return false;
   }

   var str=document.getElementById('fm-email').value;
   var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   if (!filter.test(str)) {
     alert( "This is not a valid email format" );
     document.getElementById('fm-email').focus() ;
     return false;
   }

   var str=document.getElementById('fm-tool_name').value;
   var regexp = /^[a-zA-Z0-9-_]+$/;
   if (str.search(regexp) == -1){
     alert( "Only alpha numeric values and _ or - are allowed in the tool name" );
     document.getElementById('fm-tool_name').focus() ;
     return false;
   }

   if( document.getElementById('fm-tool_name').value == "" || document.getElementById('fm-tool_name').length < 4 || document.getElementById('fm-tool_name').value > 30){
     alert( "The Tool name should be between 4 and 30 characters" );
     document.getElementById('fm-tool_name').focus() ;
     return false;
   }

   if( document.getElementById('fm-tool_desc').value == "" || document.getElementById('fm-fm-tool_desc').length < 4 || document.getElementById('fm-tool_desc').value > 30){
     alert( "The Description should be between 4 and 65,000 characters" );
     document.getElementById('fm-tool_desc').focus() ;
     return false;
   }

   var file_value = document.getElementById("fm-tool_image").value;
   alert("fup "+ file_value);

    var ext = file_value.substring(file_value.lastIndexOf('.') + 1);
    alert("ext "+ ext);

    if(ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext == "png")
    {
    alert("looks good");
    } else{
    return false;
    }


   return(true);

}

和css

form {
    margin : 0 auto;
    text-align : center;
    width : 450px;
    font-size : 1.2em;
    font : 85.5%/1.5 arial, verdana, helvetica, tahoma, sans-serif;
}

form p {
    text-align : left;
    margin : 0.5em 0;
}

fieldset, #sub {
    margin : 1em 0;
    padding : 0 1em .5em;
    border : 0 none;
    border-top : #cccccc 1px solid;
}

#sub {
    border : 0 none;
}

legend {
    margin : 1em;
    padding : 0 1.5em;
    color : #003366;
    background : transparent;
    font-size : 1.1em;
    font-weight : bold;
}

legend.p {
    text-align : left;
    margin : 0.5em 0;
    padding : 0;
    color : #333333;
    font-size : 1.2em;
    font-weight : normal;
}

label {
    float : left;
    width : 110px;
    padding : 0 1em;
    text-align : right;
}

fieldset input, textarea, select {
    width : 250px;
    border-top : #555555 1px solid;
    border-left : #555555 1px solid;
    border-bottom : #cccccc 1px solid;
    border-right : #cccccc 1px solid;
    padding : 1px;
    color : #333333;
    margin-bottom : 0.5em;
}

.fm-multi {
    margin : 5px 0;
    border : 0 none;
    width : 100%;
}

.fm-multi input {
    width : auto;
    margin-bottom : 0;
    border : 0 none;
}

.fm-multi label {
    display : block;
    width : 200px;
    padding-left : 5em;
    text-align : left;
    margin : 0 auto 0.5em;
}

#fm-submit {
    clear : both;
    text-align : center;
    border : #333333 1px solid;
    padding : 1px;
    background : #555555;
    color : #ffffff;
    width : 7em;
    margin : 1em auto;
}

input:focus, textarea:focus {
    background : #efefef;
    color : #000000;
}

fieldset .fm-req {
    font-weight : bold;
}

Answer 1

您的JSFiddle设置为运行代码onload，因此您尝试调用的函数不在全局范围内。浏览器抛出错误Uncaught ReferenceError: validate is not defined并提交。

更改小提琴如何使用select方法加载JavaScript，将代码放入头部。

enter image description here

Answer 2

你的问题似乎是这样的：

if(document.getElementById('fm-tool_desc').value == "" || document.getElementById('fm-fm-tool_desc').length < 4 || document.getElementById('fm-tool_desc').value > 30){
     alert( "The Description should be between 4 and 65,000 characters" );
     document.getElementById('fm-tool_desc').focus() ;
     return false;
}

ID fm-fm-tool_desc不存在。我的控制台为我TypeError说null is not an object。

将此更改为fm-tool_desc，它应该可以正常使用。

Here is a working fiddle

请注意

我已将function validate()更改为validate=function()，并在函数定义的最后添加了分号。

<强>提示

您的文件扩展名比较条件相当激烈。您无需单独比较小写和大写。您可以使用ext.toLowerCase()=='gif'代替（.toLowerCase()将以小写字母提供字符串）。

使用onsubmit =“return validate（）”函数时，文件验证无效

2 个答案: