HTML5必要屬性兩個字段

我有兩個要求輸入字段的表單之一：HTML5必要屬性兩個字段

<form> 
    <input type="tel" name="telephone" required /> 
    <input type="tel" name="mobile" required /> 
    <input type="submit" value="Submit" /> 
</form>

是否有可能得到瀏覽器來驗證所以只需要其中的一個？即如果電話被填滿，不要亂丟手機是空的，一個錯誤反之亦然

來源

2014-06-25 Andy

我認爲這將是出HTML的控制，而且你將不得不實行某種形式的JS功能。快速谷歌顯示了這個的jsfiddle http://jsfiddle.net/LEZ4r/1/所以你可以有一個if語句的控制。希望這有助於... – CheckeredMichael

看看[**這個**]（http://stackoverflow.com/a/10694930/3509874）回答！ – urbz

我有一些想法，發揮各地，現在有這個問題的一個有效的解決方案使用jQuery：

jQuery(function ($) { 
 
    var $inputs = $('input[name=telephone],input[name=mobile]'); 
 
    $inputs.on('input', function() { 
 
     // Set the required property of the other input to false if this input is not empty. 
 
     $inputs.not(this).prop('required', !$(this).val().length); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post"> 
 
    Telephone: 
 
    <input type="tel" name="telephone" value="" required /> 
 
    <br />Mobile: 
 
    <input type="tel" name="mobile" value="" required /> 
 
    <br /> 
 
    <input type="submit" value="Submit" /> 
 
</form>

它使用兩個輸入input事件，當一個不爲空它將另一個輸入的必需屬性設置爲false。

我已經寫了jQuery plugin包裹上述的JavaScript代碼，以便它可以在元件的多個組使用。

來源

2014-06-26 13:40:25 Andy

對於我的需求進行了一些調整，此工作非常好，謝謝.. – Anupam

你會做的更好形式的數據驗證的JavaScript無論如何，這是因爲HTML5驗證不會在舊的瀏覽器。這裏是：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Form Validation Phone Number</title> 
</head> 
<body> 
    <form name="myForm" action="data_handler.php"> 
     <input type="tel" name="telephone"> 
     <input type="tel" name="mobile"> 
     <input type="button" value="Submit" onclick="validateAndSend()"> 
    </form> 
    <script> 
     function validateAndSend() { 
      if (myForm.telephone.value == '' && myForm.mobile.value == '') { 
       alert('You have to enter at least one phone number.'); 
       return false; 
      } 
      else { 
       myForm.submit(); 
      } 
     } 
    </script> 
</body> 
</html>

。
現場演示這裏：http://codepen.io/anon/pen/LCpue?editors=100。如果您願意，請告訴我這是否適合您。

來源

2014-06-26 04:53:47

感謝您的回答。不過，所以我不打擾舊的瀏覽器表單驗證是在服務器端完成。 HTML5表單驗證是對具有較新瀏覽器的用戶的漸進增強，我希望使用這些瀏覽器並顯示瀏覽器的本機錯誤消息 – Andy

HTML5必要屬性兩個字段

回答

相關問題