表单提交按钮时图片时遇到的问题

因为才学html，css，js一点点，不是很熟悉。所以当把提交按钮为图片时，遇到了一点小问题。就是提交表单之前需要对表单进行验证。下面是错误的代码：

<form class="form" name="betaform" action="index.jsp" method="post" οnsubmit="return checkData();">
            <table align="center">
            	<tr>
                	<td class="space"></td>
                	<td align="left" colspan="2">name:</td>
                </tr>
                <tr>
                	<td class="space"></td>
				 	<td align="left"><span class="fieldHolder"><input name="name" class="textInput" type="text" onBlur="checkname(this.value)"></span>
                	</td>
                    <td>
                    	<span id="nameErr"></span>
                    </td>                    
                </tr>
                <tr>
                	<td class="space"></td>
                	<td align="left" colspan="2"> password:</td>
                </tr>
                <tr> 
                	<td class="space"></td>    
				 	<td align="left"><span class="fieldHolder"><input name="password" class="textInput" type="password" onBlur="checkpsw(this.value)"></span>
                	</td>
                    <td>	  
                          <span id="pswErr"></span>
                    </td>                    
                </tr>
                </table>    
                <br /><br /><br />
					<div align="center">
                    	<img src="images/login-submit.png" onClick="document.betaform.submit();" class="loginSubmit">
					</div>
			</form>				

一下是js的代码：

function checkData() {
	var name=document.betaform.name.value;
	if(!checkname(name)) {
		return false;
	}
	
	var psw=document.betaform.password.value;
	if(!checkpsw(psw)) {
		return false;
	}
	
	return true;
}

function checkname(name) {
	if(name.length == 0) {
		document.getElementById("nameErr").innerHTML = "用户名不能为空";
		return false;
	} else {
		document.getElementById("nameErr").innerHTML = "";
		return true;
	}
}

function checkpsw(psw) {
	if(psw.length == 0) {
		document.getElementById("pswErr").innerHTML = "密码不能为空";
		return false;
	} else {
		document.getElementById("pswErr").innerHTML = "";
		return true;
	}
}

按照上面的写法，只要一按提交图片，不管表单填的数据是否正确都能跳转。认真的思考了一下，觉得应该是

<form class="form" name="betaform" action="index.jsp" method="post" οnsubmit="return checkData();">
<img src="images/login-submit.png" onClick="document.betaform.submit();" class="loginSubmit">

 

这两句的问题，因为点击图片直接进行提交，所以在<form>里设置的 onsubmit没有用，于是将这两句改成下面的样子。

<form class="form" name="betaform" action="index.jsp" method="post">

<img src="images/login-submit.png" onClick="checkData();" class="loginSubmit">

js相应的也进行了修改：

function checkData() {
	var name=document.betaform.name.value;
	if(!checkname(name)) {
		return false;
	}
	
	var psw=document.betaform.password.value;
	if(!checkpsw(psw)) {
		return false;
	}
	
	document.betaform.submit();            //如果通过验证，则提交表单
}

以此实现点击图片时先进行表单验证，如果通过，则提交表单。