Fix An invalid form control with name=’…’ is not focusable

今天在開發一個表單程式,表單一直無法發送,開始來找問題,開啟 Chrome 開發者工具,在 Console 面板中,每送出一次表單,就會出現一個這個訊息:

An invalid form control with name=’…’ is not focusable

原因是 Chrome 阻止設定為 required 的欄位隱藏

也對拉!! 必填欄位又隱藏起來,怎麼填? 表單送出前會做一個簡單的表單驗證

這樣也不行:

<input type="text" style="display:none" required>

這樣當然也不行:

<input type="text" id="example" required>
<script>
	$('#example').hide();
</script>

這樣可以:

大概是原本就是隱藏欄位了,所以沒有特別去驗證

<input type="hidden" required>

解決方法:

開發者會去隱藏欄位當然是有原因的,有時候會因為條件判斷而顯示不同輸入欄位,例如:居住地下拉選單,但使用者可能住於國外,所以表單設計在下拉選單尾端加一個”海外”的選項,選擇了海外,就出現一個自行輸入的文字欄位,像這樣的需求其實蠻常見的,這些輸入欄位通常都只是隱藏起來,依照判斷來顯示,這種欄位當然有可能顯示出來就是必填,下方介紹幾個解決方法來解決這個問題。

novalidate

在 form 屬性加上 novalidate,關閉預設的表單驗證,表單內的所有欄位都不會進行驗證,除非有其他方式進行表單驗證,不然不建議這麼做。

<form novalidate>
    <input type="text" id="example" style="display:none" required>
    <input type="submit" value="submit">
</form>

jQuery prop(‘required’,true)

在顯示的時候,再加上 required,如此,不管隱藏的文字欄位顯示與否,表單都可以正確送出,文字欄位顯示時,就必須填寫。

<form>
    <input type="text" id="example" style="display:none">
    <input type="submit" value="submit">
</form>
<hr>
<input type="button" id="show" value="show">
<script>
$('#show').click(function(e){
	$('#example').css('display','block').prop('required',true);;
});
</script>

這是一個簡單的提示,實務上的做法就看大家如何發揮創意了

 [……]

閱讀更多

CSS Calc運算

終於是等到這個功能了,CSS3增加了Calc()這個function進行數值運算,大部分用於容器寬度或高度的計算,這讓CSS的開發更快、靈活度更高並增加重複使用的可能性,Calc()還有一個很棒的優點,可以針對不同單位進行運算。

支援運算:

+


*

/

CSS Calc運算

下方範例可以得到欄位寬度,可用來製作自己的網格系統

.column-1 {
  width: calc( 100% / 1);
}

.column-2 {
  width: calc( 100% / 2);
}

.column-3 {
  width: calc( 100% / 3);
}

 不同單位運算

#element1 {
  width: calc(50% - 2em);
}

參考資料:

[……]

閱讀更多

CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ,雖然jQuery跟CSS選取器(selector)有很多相似之處,但還是有些差異,在CSS中要在重複元素中獲取一個元素是用偽類 :nth-child(2)

比如說我要指定定Apple 的樣式為紅色:

<div>
    <div id="bar1" class="foo">banana</div>
    <div id="bar2" class="foo">Apple</div>
    <div id="bar3" class="foo">Orange</div>
</div>

我們可以這麼做,都可以達到相同效果:

#bar2{
	color:red;
}
div.foo:nth-child(2){
	color:red;
}
.foo:nth-child(2){
	color:red;
}

同場加映

除了:nth-child()還有其他用在取得元素的偽類,都很常用到優

  • :first-child
  • :second-child
  • :third-child
  • :last-child
  • :nth-child

參考資料:

[……]

閱讀更多

CSS RWD 響應式 @media 及常用尺寸速查

Meta Viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

CSS @media 參考裝置尺寸:

/* 手機直 */
@media (max-width: 480px) {
}

/* 手機橫 */
@media (max-width: 767px) {
}

/* 平板 */
@media (min-width: 768px) and (max-width: 979px) {
}

/* 平板橫 */
@media (min-width: 980px) {
}

/* 桌機 小於1200 */
@media (max-width: 1139px) {
}

/* 桌機 大於 1200 */
@media (min-width: 1200px) {
}

/* 桌機 大於 1240 */
@media (min-width: 1240px) {
}

bootstrap 4 – RWD Layout

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

 [……]

閱讀更多

jQuery 確認是否擁有某一標籤屬性

jQuery 並沒有 .hasAttr() 用於判斷某一屬性是否存在,所以透過下面代碼來檢查

此代碼優點在於可檢查屬性是否存在,並檢查是否為空值

/**
* VECTOR COOL
* https://vector.cool
*/
var attr = $(this).attr(‘name’);
if (attr && attr !== false) {
// Element has this attribute
}

 

 [……]

閱讀更多

jQuery Form data to Object

jQuery Serialize Object

取得所有表單資料,目前試過唯一能轉多維表單物件的,使用簡單,找到感覺得救了
Form data to Object jQuery

Example:

<form id="contact">
<input name="user[email]" value="jsmith@example.com">
<input name="user[pets][]" type="checkbox" value="cat" checked>
<input name="user[pets][]" type="checkbox" value="dog" checked>
<input name="user[pets][]" type="checkbox" value="bird">
<input type="submit">
</form>
$('form#contact').serializeObject();
//=> {user: {email: "jsmith@example.com", pets: ["cat", "dog"]}}
$('form#contact').serializeJSON();
//=> '{"user":{"email":"jsmith@example.com","pets":["cat","dog"]}}
'

[……]

閱讀更多

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]

閱讀更多

網頁前端 framework 整理

Bootstrap 4 alphahttp://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

bootstrap 3 v3.3.7
http://getbootstrap.com/

bootstrap 3 v3.3.1 (中文)
https://kkbruce.tw/bs3/

Foundation for Sites 6
http://foundation.zurb.com/

Google Material design

Polymer Paper Elements Paper elements
https://elements.polymer-project.org/

[……]

閱讀更多

CSS li float:center 實現li水平居中對齊

在切網頁版的時候,常常需要用到選單水平居中,雖然用<a>標籤很方便,在父容器下text-align center,就可達成上圖編排,但有時候HTML並不是由設計師自己開的,很多清單功能的在HTML上都會用<ul><li>方式呈現,例如頁碼,這是一個普遍慣用的作法,工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題,可以向左對齊,可以向右對齊,就是不能水平居中對齊,所以本篇提供一個解決方法,可以順利向上圖一樣,項目居中對齊。
HTML:
<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li> 
        </ul>
    </div>
</div>

CSS:

<style>
ul li{
	float:left;
	margin:0 20px
}
.main-container {
	float:left;
	position:relative;
	left:50%;
}
.fixer-container {
	float:left;
	position:relative;
	left:-50%;
}
</style>

參考:

[……]

閱讀更多