2

html代码

<div id="signup">
    <form  id="suform" method="POST" action="roma/roma">
        <p>
            <label>Frist Name</label>
            <input type="text" id="sufName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Last Name</label>
            <input type="text" id="sulName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Email</label>
            <input type="text" id="suEmail"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Mobile Number</label>
            <input type="text" id="suMNumber"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Password</label>
            <input type="password" id="suPassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Re Password</label>
            <input type="password" id="suRePassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <input type="submit" class="button" value="sign up"/>
        </p>
    </form>
</div>

注册页面只有六个输入字段 ，这是确保没有输入字段为空的 jQuery 代码，如果没有输入字段为空，我想提交表单。

jQuery代码

$(document).ready(function(){
    $('#suform').on('submit', function(e){
        e.preventDefault();
        var errorCount = 0;
        $('span.errorMessage').text(''); // reset all error mesaage
        $('input').each(function(){
            var $this = $(this);
            if($this.val() === ''){
                var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        if(errorCount === 0){
            $(this).submit(); // submit form if no error
        }
    });
});

该代码确保没有输入字段为空，它找到一个空的然后会出现错误消息，否则应该提交，但提交不起作用。

代码

4

4 回答 4

3

尝试使用$(this)[0].submit();. 使用 $(this) 是指对表单的 jQuery 对象引用。我不知道 jQuery 的submit()方法实际上做了什么，但它显然没有提交表单。Using$(this)[0]指的是实际的 DOM 元素，它将使用标准的 DOM 提交方法，这就是您要查找的内容。

我相信你已经知道这一点，但你应该使用服务器端和客户端验证，因为有些用户没有 JS，有些用户会故意篡改你的表单。只是一个快速的“不要忘记”！

于 2012-05-12T14:33:17.967 回答
3

查看jQuery 验证插件。为此，您class = "required"为所需的任何输入字段添加一个，然后调用validation它：

$('form').validation({
  // any options you want
});

它还会做一些方便的事情，比如显示错误消息、进行条件验证等。

于 2012-05-12T14:37:34.717 回答
1

您可以删除e.preventDefault()并使用returninsead：

$('form').on('submit', function(e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('input').each(function(){
        var $this = $(this);
        if($this.val() === ''){
            var error = 'Please fill ' + $this.prev('label').text();
            $this.next('span').text(error);
            errorCount = errorCount + 1;   
        }
    });
    return errorCount === 0;
});

演示：http: //jsfiddle.net/h9njC/27/

于 2012-05-12T14:35:13.067 回答
0 
$('form').on('submit',function(e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('input').each(function(){
        var $this = $(this);
        if($this.val() === ''){
            var error = 'Please fill ' + $this.prev('label').text();
            $this.next('span').text(error);
            errorCount = errorCount + 1;   
        }
    });
    if(errorCount === 0){
        alert('done'); // just an alert to notice when everything OK [remove it]
        $this.submit(); // submit the form on success
    } else e.preventDefault(); // halt the submission on default
  });

演示

于 2012-05-12T15:13:13.093 回答