JavaScriptのバリデーション提出時

Question

私の実際のコードは私のシミュレーションです。

私がする必要があるのは、日付書式が有効でない場合、falseを返してサブミットしないことです。これを行うための非常に便利な方法だろう

function validateDate(DateField) { 
 
\t  var regDate = /^([0-9]{2})\.([0-9]{2})\.([0-9]{4})$/; 
 

 
\t  if(DateField.value.length > 0) { 
 
\t   if(regDate.test(DateField.value) == false) { 
 
\t    alert('Date Format should be dd.mm.yyyy!'); 
 
\t    document.getElementById("lblTest").style.color = "red"; 
 
\t    return false; 
 
\t   } else { 
 
\t    document.getElementById("lblTest").style.color = "black" 
 
\t    return true; 
 
\t   } 
 
\t  } else { 
 
\t   document.getElementById("lblTest").style.color = "black"; 
 
\t   return true; 
 
\t  } 
 
\t } 
 
    
 
    $("#submit").click(function(){ 
 
    //condition should be here but right now I dont know what this should be 
 
    });

<form method="post"> 
 
    <label id="lblTest">Date</label> 
 
    <input type="test" placeholder="dd.mm.yyyy" id="txtDate" onblur="validateDate(this);"> 
 
    <input type="button" id="submit" formaction="www.google.com" value="Submit"> 
 
</form>

Answer 1

が

function validateDate(DateField) { 
    var regDate = /^([0-9]{2})\.([0-9]{2})\.([0-9]{4})$/; 

    if(DateField.value.length > 0) { 
     if(regDate.test(DateField.value) == false) { 
      alert('Date Format should be dd.mm.yyyy!'); 
      document.getElementById("lblTest").style.color = "red"; 
     $('#submit').attr('disabled', 'disabled'); 

      return false; 
     } else { 
      document.getElementById("lblTest").style.color = "black" 
     $('#submit').attr('disabled', false); 
      return true; 
     } 
    } else { 
     document.getElementById("lblTest").style.color = "black"; 
    $('#submit').attr('disabled', false); 
     return true; 
    } 
} 

ここにこのコードを試してみて、送信ボタンを有効または無効日付の検証に基づいて

Answer 2

より良いあなたがHTML5日付型の入力を使用して、必要な形式で日付を解析.. ..

UPDATE

ここに入力ボックスがあります：

<input type="date" onBlur="fngetDate(this.value)"> 

ここ

は、コードはそれを解析することです：

function fngetDate(val){ 
var dateEntered = new Date(val); var myFormat = dateEntered.getDate() + '.'+dateEntered.getMonth()+'.'+dateEntered.getFullYear(); alert(myFormat); } 

Answer 3

クロムのみをターゲットブラウザの場合：他に

使用date type input<input type="date">

ここでパターン<input type="text" pattern="yourRegEx" required>

<form method="post"> 
    <label id="lblTest">Date</label> 
    <input type="date" required> 
    <br> 
    <label>another Date</label> 
    <input type="text" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" value="" id="dates_pattern0" placeholder="dd.MM.YYYY"> 
    <input type="text" formaction="www.google.com" value="Submit"> 
</form> 

ワーキングJSFiddleを使用します。 https://jsfiddle.net/0ay8jkx4/2/

Answer 4

送信イベントを処理できます。そして、検証に合格しない場合はfalseを返します。

$('form').submit(function(){ 
    //validate here 
}) 

Answer 5

はちょうどこの

$("form").submit(function(){ 
    return validateDate(document.getElementById("txtDate")); 
}); 

を行います

もちろん正規表現を次のように修正する必要があります：

^(([0-2]{0,1}[1-9]{1})|(3{0,1}[0-1]{0,1}))\.((0[1-9])|(1[0-2]))\.((19[0-9][0-9])|(20((0[0-9])|(1[0-7]))))$