フォームの入力時にフォームのクラスを変更するにはどうすればよいですか？

Question

私は現時点で私のサイトに検索機能を追加するためにaを使用しています。私はそれらに765611で始まる数字を入力し、その後に11個の数字を入力します。彼らは間違った番号（765611 で始まり、がそれを進める11個の数字を持っていないつまり1）の背景を入力した場合

var a = document.getElementById('search'); 
a.addEventListener('submit',function(e) { 
    e.preventDefault(); 
    var b = document.getElementById('searchbar').value; 
    window.location.href = 'thecopperkings.co.uk'+b; 

}); 

：彼らは正しい番号を入力すれば、それは以下のスクリプトを実行しますdivは2秒間赤く点滅します（これは、赤い背景を持つ一時的なクラス値を追加することによって行われます）、遷移もあり、上記のコードは実行されません。

私はJSにかなりひどい（および新しい）ですが、他の人々のコードと私の基本的な知識を見て、私はそれがこの線に沿って何かでなければならないであろうと想定しますです

var search = document.getElementByID('search'); 
a.addEventListener('submit',function(e) { 
if document.getElementByID('searchbar').value = "765611[0-9]{11}$" { 
    e.preventDefault(); 
    var b = document.getElementById('searchbar').value; 
    window.location.href = 'thecopperkings.co.uk'+b; 
} 
else { 
**SET THE FORM'S CLASS TO "RED"?** 
} 

何これを行う最も効率的な方法は？また

var a = document.getElementById('search'); 
 
    a.addEventListener('submit',function(e) { 
 
     e.preventDefault(); 
 
     var b = document.getElementById('searchbar').value; 
 
     window.location.href = 'thecopperkings.co.uk'+b; 
 

 
    });

 <div> 
 
      <form class="search" id="search" method="get" action="html/player.html"> 
 
       <input type="text" placeholder="What is your SteamID?" id="searchbar" name="id" maxlength="17"> 
 
       <input type="submit" value="Search"> 
 
      </form> 
 
     </div>

Answer 1

属性以下の答えを見つけるしてください。

実施例は、ここにjsFiddle

私が押していずれかの方法は、それがリダイレクト入るので、これは私のために動作しません.red { background-color:red !important;}

 

 
    var a = document.getElementById('search'); 
 

 
function appendClass(elementId, classToAppend){ 
 
    var oldClass = document.getElementById(elementId).getAttribute("class"); 
 
    if (oldClass.indexOf(classToAppend) == -1) 
 
    { 
 
     document.getElementById(elementId).setAttribute("class", oldClass+ " "+classToAppend); 
 
    } 
 
} 
 

 
function removeClass(elementId, classToRemove){ 
 
    var oldClass = document.getElementById(elementId).getAttribute("class"); 
 
    if (oldClass.indexOf(classToRemove) !== -1) 
 
    {  \t \t \t document.getElementById(elementId).setAttribute("class",oldClass.replace(classToRemove,'')); 
 
    } 
 
} 
 
    a.addEventListener('submit',function(e) { 
 
     e.preventDefault(); 
 
     var b = document.getElementById('searchbar').value; 
 
     //regular expression to match your criteria and test the sample value 
 
\t \t \t \t if(/^765611[0-9]{11}$/.test(b)) { 
 
     \t \t alert('success -> '+ b); 
 
\t \t \t \t \t window.location.href = 'thecopperkings.co.uk'+b; 
 
\t \t \t \t } else { 
 
     //append the class red for searchid which is in form element 
 
     \t appendClass('search','red'); 
 
      //remove the red class after 2sec(2000milliseconds) 
 
     \t window.setTimeout(function(){removeClass('search','red');},2000); 
 
     } 
 

 
    });

 <div> 
 
      <form class="search" id="search" method="get" action="html/player.html"> 
 
       <input type="text" placeholder="What is your SteamID?" id="searchbar" name="id" maxlength="17"> 
 
       <input type="submit" value="Search"> 
 
      </form> 
 
     </div>

Answer 2

var patt = new RegExp("765611[0-9]{11}$"); 
var searchbar = document.getElementByID('searchbar'); 
var searchForm = document.getElementByID('search'); 

if(patt.test(searchbar.value)){ 
    searchForm.classlist.remove('error'); 
    // do your magic 
} else{ 
    searchForm.classlist.add('error'); 
    // And maybe an alert or notice for the user 
} 

、HTML5の入力をチェックアウトpattern=""