最簡單的方法來改變錯誤

Question

我試圖找出放一個紅色邊框的文本字段，如果它不遵循特定的格式，最簡單的方法一個文本框的邊框。我的代碼是屬性檢測，如果文本是正確的格式，但我無法在檢查失敗時更改邊框顏色。如果可能，我寧願只使用html/css和JavaScript，但我似乎無法弄清楚如何做到這一點。

這是我的文本框HTML：

<p class="fieldtitle"> First Name </p> 
<span><input type="text" class="textinput" id="fname" name="fname" /></span> 

這是我的JavaScript來檢查它是否是正確的格式：

function chkfName() { 
    var myfname = document.getElementById("fname"); 
    var pos = myfname.value.search(/^[A-Z][a-z]+$/); 

    if (pos != 0) { 
     //this is where I want to change the border around the text box 
     return false; 
    } else 
     return true; 
} 

Answer 1

你可以很容易地改變它這個樣子！

function chkfName() { 
var myfname = document.getElementById("fname"); 
var pos = myfname.value.search(/^[A-Z][a-z]+$/); 

if (pos != 0) { 
    fname.style.borderColor = "red"; 
    return false; 
} else 
    return true; 

}

下面是一些關於它的文件：使用http://www.w3schools.com/js/js_htmldom_css.asp

Answer 2

與JS創建樣式類.error
撥動它Element.classlist.toggle^Docs

function chkfName() { 
 
    var fname = document.getElementById("fname"); 
 
    var pos = /^[\w'-]{2,32}$/.test(fname.value); 
 
    fname.classList.toggle("error", !pos); 
 
    return pos; 
 
} 
 

 
document.forms[0].addEventListener("submit", chkfName);

.error{border:2px solid red;}

<form> 
 
    <p class="fieldtitle"> First Name </p> 
 
    <span><input type="text" class="textinput" id="fname" name="fname" /></span> 
 
    <input type="submit" value="Test"> 
 
</form>

我謹請使用[A-Z][a-z]+勸阻你，就像Đuro一個人的名字會返回一個不錯的錯誤，因爲沒有一個A-Z字符。
另外，我會使用.trim()和自動轉換第一個字符大寫 - 爲更好的用戶體驗。眼看roko正在從你的程序自動轉換爲Roko - 沒有拋出廢話錯誤，停止我的進步 - 將是相當不錯的體驗。
以任何方式，你應該找到一個更好的正則表達式。

Answer 3

有關信息，因爲它不給任何JavaScript提示：

HTML5允許測試與屬性模式的模式：

如果也許不是在現實生活中使用的是，它是一個快速的方式來測試你的正則表達式。

https://www.w3.org/TR/html-markup/datatypes.html#form.data.pattern

https://www.w3.org/wiki/HTML/Elements/input/text

http://caniuse.com/#feat=input-pattern

input:valid {/* empty doesn't trigger errors, so it is valid :(unless required */ 
 
    border-color:green; 
 
    box-shadow:0 0 0 3px green; 
 
    } 
 
input:invalid { 
 
    border-color:red; 
 
    box-shadow:0 0 0 3px tomato 
 
    }

<form> 
 
    <p>The pattern from your question</p> 
 
    <input type="text" name="test" pattern="^[A-Z][a-z]+$" placeholder="^[A-Z][a-z]" required /> 
 
    </form>