https://thaitec.jp/public/js/contact.js

1// JavaScript Document
2$(document).ready(function(){
3	
4  //form reset
5  $('.submit-reset').click(function(){
6    $('#contact')[0].reset();  
7  })
8  
9  //form back
10  $('.submit-back').click(function(){
11    window.history.go(-1);  
12  })
13  
14  
15	my_hissu = $("tr.input_hissu");
16	
17	//必須inputにfunction focusin focusoutを付ける。
18	my_hissu.find("input").focus(_eventFocusin_input);
19	my_hissu.find("textarea").focus(_eventFocusin_textarea);
20	my_hissu.find("label").click(_eventFocusin_input_label); //checkbpx radio の場合はinputから確認できないためlabelから確認
21	
22	my_hissu.find("input").focusout(_eventFocusout_input);
23	
24	//Text_area
25	my_hissu.find("textarea").focusout(_eventFocusout_input_Textarea);
26	
27/****************************************************************************/
28//<!-- Submit Contact-->
29$('.submit-regist').click(function() {
30    check_all_hissu($("tr.input_hissu"));
31	if(all_hissu) {
32		/* OK */
33		/*alert("OK and goto confirm");*/
34		$('form#contact').submit();
35    } else {
36        return false;
37    }
38});
39$('#contact_form.confirm .submit-regist').click(function() {
40	/*alert("OK and goto finish");*/
41});
42
43/****************************************************************************/
44	
45	
46});
47
48
49function _eventFocusin_input(event) {
50	Focusin_input_text($(this));
51}
52function Focusin_input_text(my_input){
53    console.log('focusin_input_text: '+my_input.prop('id').replace(/"[0-9]+$"/g, ""));
54	my_input.css("background-color","#fff"); //背景は白くする
55	my_input.parent().find(".alert").slideUp();//alertを非表示する	
56}
57
58function _eventFocusin_textarea(event) {
59	Focusin_input_textarea($(this));
60}
61function Focusin_input_textarea(my_input){
62    console.log('focusin_input_text: '+my_input.prop('id').replace(/"[0-9]+$"/g, ""));
63	my_input.css("background-color","#fff"); //背景は白くする
64	my_input.parent().find(".alert").slideUp();//alertを非表示する	
65}
66function _eventFocusin_input_label(){
67	$(this).css("background-color","#fff"); //背景は白くする
68	$(this).parent().find("label").css("background-color","#fff");
69	$(this).parent().find(".alert").slideUp();//alertを非表示する
70}
71
72
73//必須は全部入力するば　all_hissu　は trueにする。
74function check_all_hissu(input_hissu_check){
75	//最初にall_hissuはtrueにする
76	all_hissu=true;
77	
78	//inputの種類振り分け
79	input_hissu_check.each(function(){		
80		switch ($(this).find("input").prop('type')){
81			case "email": //email の場合
82				Check_Input_Mail($(this));
83				break;
84			case "text": //textbox の場合
85				Check_Input_Text($(this));
86				break;
87		}
88		
89	});
90	
91	//Text_area
92	input_hissu_check.find("textarea").each(function(){
93			//alert($(this).prop('id'));
94			Check_Textarea($(this));
95	});
96}
97
98//TEXT inputをcheck
99function Check_Input_Text(my_this){
100	//何も書かなかった場合
101	
102	if(!my_this.find("input").val()){
103		//背景色付ける、alertを表示する、次のStepが開けない。
104		my_this.find("input").css("background-color","#d2fffe");//背景色付ける
105		my_this.find(".alert").slideDown();	//alertを表示される	
106		all_hissu=false;		
107	}
108	else{
109		my_this.find("input").css("background-color","#fff");
110		my_this.find(".alert").slideUp();	
111	}
112}
113//Mail inputをcheck
114function Check_Input_Mail(my_this){
115	//何も書かなかった場合
116	if(!my_this.find("input").val()){
117		//背景色付ける、alertを表示する、次のStepが開けない。
118		my_this.find("input").css("background-color","#d2fffe");//背景色付ける
119		my_this.find("#alert-mail.alert").slideDown();	//alertを表示される	
120		all_hissu=false;		
121	}
122	else{
123		my_this.find("#alert-mail.alert").slideUp();
124		if(!my_this.find("input").val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
125		//実行内容
126			my_this.find("input").css("background-color","#d2fffe");//背景色付ける
127			my_this.find("#alert-mail_.alert").slideDown();	//alertを表示される	
128			all_hissu=false;		
129			
130			}
131		else{
132			my_this.find("input").css("background-color","#fff");
133			my_this.find("#alert-mail_.alert").slideUp();	
134		}
135	}
136}
137
138
139//RADIO inputをcheck
140function Check_Input_Radio(my_this,radio_name){
141	
142	//alert($("input[name='data[Candidate][present_status]']:checked").val());
143	//checkしていなかった場合
144	if(!$("input[name='"+radio_name+"']:checked").val()){
145		//背景色付ける、alertを表示する、次のStepが開けない。
146		my_this.parent().find("label").css("background-color","#d2fffe");//背景色付ける	
147		my_this.parent().find(".alert").slideDown();		//alertを表示される
148		all_hissu=false;		
149	}
150}
151
152//TEXT inputをcheck
153function Check_Textarea(my_this){
154	//何も書かなかった場合	
155	if(!my_this.val()){
156		//背景色付ける、alertを表示する、次のStepが開けない。
157		my_this.css("background-color","#d2fffe");//背景色付ける
158		my_this.parent().find(".alert").slideDown();	//alertを表示される	
159		all_hissu=false;		
160	}
161	else{
162		my_this.css("background-color","#fff");
163		my_this.parent().find(".alert").slideUp();	
164	}
165}
166
167
168//inputからFocus外したら
169function _eventFocusout_input(event) {
170	//inputの種類を確認
171	switch ($(this).prop('type')){
172		case "text": //textbox の場合
173			Focusout_input_Text($(this));　
174			break;
175		case "email": //email の場合
176			Check_Output_Mail($(this));
177			break;
178		case "checkbox":　//checkboxの場合
179			//checkboxの場合何もしない。
180			break;
181		case "radio":　//checkboxの場合
182			Focusout_input_Radio($(this),$(this).prop('name'));
183			break;
184	}
185	
186}
187//inputからFocus外したら
188function _eventFocusout_input_Textarea(event) {
189	Check_Textarea($(this));
190}
191
192//TEXT inputからFocus外したら
193function Focusout_input_Text(my_this){
194	//複数のinputがどうかを調べて、分ける。
195	//（生年月日の場合かどうか）
196	if(("birth_year"==my_this.prop('name'))||("birth_month"==my_this.prop('name'))||("birth_day"==my_this.prop('name'))){
197		//alert("birth :"+my_this.prop('name'));	
198		//何も書かない場合
199		if(!my_this.val()){
200			//何も反応していない
201		}
202		//何か書いた場合
203		else{
204			//そのinputの背景はしろくする。
205			my_this.css("background-color","#fff");
206			//全部の生年月日を書いたかどうか確認して、全部書いた場合はalertを非表示
207			if(($("input#birth_year").val())&&($("input#birth_month").val())&&($("input#birth_day").val())){	
208					my_this.parent().parent().parent().find(".alert").slideUp();//alertを非表示
209				}
210		}
211	}
212	//「氏名」の場合は「フリガナ」と連携するので、氏名入力すると「フリガナ」の方も反応

213	else if(my_this.prop('name')=="name"){
214		//何も書かない場合、alertを表示する　
215		if(!my_this.val()){
216			my_this.css("background-color","#d2fffe");//背景色付ける
217			my_this.parent().parent().parent().find(".alert").slideDown();	//alertを表示する
218		}
219		//何か書いた場合
220		else{
221			//氏名入力すると「フリガナ」の方も反応
222			if($("input#kana").val()){
223				$("input#kana").css("background-color","#fff");//背景は白くする
224				$("input#kana").parent().parent().find(".alert").slideUp();//alertを非表示	
225			}
226		}
227	}	
228	//普通のinputの場合。
229	else{
230		//何も書かない場合　alertを表示する
231		if(!my_this.val()){
232			my_this.css("background-color","#d2fffe");//背景色付ける
233			my_this.parent().parent().parent().find(".alert").slideDown();//alertを表示する
234		}
235	}
236}
237
238//Mail inputをcheck
239function Check_Output_Mail(my_this){
240	//何も書かなかった場合
241	
242	if(!my_this.val()){
243		//背景色付ける、alertを表示する、次のStepが開けない。
244		my_this.css("background-color","#d2fffe");//背景色付ける
245		my_this.parent().parent().find("#alert-mail.alert").slideDown();	//alertを表示される	
246		all_hissu=false;		
247	}
248	else{
249		my_this.parent().parent().find("#alert-mail.alert").slideUp();
250		if(!my_this.val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
251		//実行内容
252			my_this.css("background-color","#d2fffe");//背景色付ける
253			my_this.parent().parent().find("#alert-mail_.alert").slideDown();	//alertを表示される	
254			all_hissu=false;		
255			
256			}
257		else{
258			my_this.css("background-color","#fff");
259			my_this.parent().parent().find("#alert-mail_.alert").slideUp();	
260		}
261	}
262}