0

html代码

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

当我按下注册按钮时，我想确保没有输入文件为空，如果任何输入字段为空，我将在该输入字段中添加一条错误消息

javascript代码

function signup(){
    var inputs = document.getElementsByTagName('input');
    for(var i=0;i<inputs.length;i++){
        alert('d');
        isEmptyInput(inputs[0].id);
    }
}
function addErrorMessage(element){
    clearErrorMessage();
    var error = document.createElement('span');
    error.setAttribute('class', 'errorMessage');
    error.innerHTML="select coutry first";
    element.appendChild(error);
}
function clearErrorMessage(){
    var errors = document.getElementsByClassName('errorMessage');
    for(var i=0;i<errors.length;i++){
        var kk=errors[i].parentNode;
        kk.removeChild(errors[i]);
    }
}
function isEmptyInput(input){
    if(input.value===""){
        var parent = input.parentNode;
        addErrorMessage(parent);
    }
}

但不起作用，即使函数 isEmptyInput 也不起作用 jsfiddle 复制 代码

4

4 回答 4

1

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

HTML：

<form method="POST" action="#" onSubmit='return false;'>

js：

function signup(){
    var inputs = document.getElementsByTagName('input');
    clearErrorMessage();
    for(var i=0;i<inputs.length;i++){
        isEmptyInput(inputs[i]);
    }
    return false;
}
function addErrorMessage(element,field){
    var error = document.createElement('span');
    error.setAttribute('class', 'errorMessage');
    error.innerHTML = "select "+field+" first";
    element.appendChild(error);
}
function clearErrorMessage(){
    var errors = document.getElementsByClassName('errorMessage');
    for(var i=0;i<errors.length;i++){
        var kk=errors[i].parentNode;
        kk.removeChild(errors[i]);
    }
}
function isEmptyInput(input){
    if(input.value===""){
        var parent = input.parentNode;
        var field = parent.getElementsByTagName('label');
        addErrorMessage(parent,field[0].innerHTML);
    }
}​
于 2012-05-12T12:45:38.913 回答
1

试试看：

$("input[type=submit]").click(function () {
    var err = false;
    $(this).closest("form").find("input[type='text']").each(function () {
        if ($(this).val() == "") {
            addErrorMessage(this); //or any other error handling you like                
            err = true;
        }
    });
    return !err;        
});

我写了一个用于表单验证的 jquery 插件。看看这个。希望能帮助到你。

于 2012-05-12T13:00:54.430 回答
1

  1. 由于您正在使用jquery，因此可以轻松完成。

  2. 而且您还没有p正确关闭标签。

  3. 首先，您应该防止默认功能，因为它正在提交中。

  4. 每次调用都附加是不好的，因为每次提交时错误跨度的数量都会增加。

像下面这样更改 HTML 并尝试 jquery。

HTML：

<form method="POST" action="#">
    <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>

** jQuery **

 $(document).ready(function(){
  $('form').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
  }
  });
 });

小提琴：http: //jsfiddle.net/h9njC/11/

于 2012-05-12T13:14:42.287 回答
0

因为您使用的是提交按钮。

将您的代码添加到表单的OnSubmit()事件中并在验证失败时返回 false，或者将您的按钮更改为常规按钮type='button'，然后在验证成功时document.forms[0].submit()在您的方法中调用。signup()

于 2012-05-12T12:47:43.553 回答