javascript - javascriptでonBlurタグを削除しますか?

Question

私は JavaScript ファイルを持っており、次のように動作するように作成しました: - HTML フォームのフィールドに入力された名前と電子メールを確認します。電子メールまたは名前が無効な場合、JavaScript はユーザーに警告を発し、入力した電子メールまたは名前が無効であることを警告します。

いずれにせよ、このアラートは "onBlur" でポップアップ表示されます (カーソルが名前と電子メールフィールドを終了したとき)。

「onBLur」タグを削除したい。ユーザーが「送信」をクリックすると、フォーム入力の最後に検証が行われるようにします。

どうやってするか？「onBlur」をどのタグに置き換える必要がありますか? ところで、「onBlur」を「onClick」に置き換えてみました。フィールドをクリックして入力すると、アラートが表示されました。

これは、私の html の head タグと /head タグの間に配置された JavaScript です**

<script language=javascript>
<!-- 

function ValidateAll()

{

if(CheckName(document.dForm.name.value) == false) return false;

if(CheckEmail(document.dForm.email.value) == false) return false;

return true;

}



function StripSpacesFromEnds(s)

{



while((s.indexOf(' ',0) == 0) && (s.length > 1))

{

    s = s.substring(1,s.length);

}

while((s.lastIndexOf(' ') == (s.length - 1) && (s.length > 1)))

{

    s = s.substring(0,(s.length - 1));

}

if((s.indexOf(' ',0) == 0) && (s.length == 1)) s = '';

return s;

}



function IsItPresent(s,explanation)

{



s = StripSpacesFromEnds(s);

if(s.length) return s;

alert('Please enter ' + explanation + '.');

return '';

}



function CheckName(s_name)

{



s_name = IsItPresent(s_name,'your name');

if(! s_name) return false;

var i = s_name.indexOf('  ',0);

while(i > -1)

{

    s_name = s_name.substring(0,(i + 1)) + 

        s_name.substring((i + 2),s_name.length);

    i = s_name.indexOf('  ',0);

}

s_name = s_name.toLowerCase();

var s = new String(s_name.substring(0,1));

s = s.toUpperCase();

s_name = s + s_name.substring(1,s_name.length);

i = s_name.indexOf(' ',0);

if(i == (s_name.length - 1)) i = -1;

var ts = new String("");

var j = 0;

while(i > -1)

{

    i++;

    j = i + 1;

    s = s_name.substring(i,j);

    s = s.toUpperCase();

    ts = '';

    if(i > 0) ts = s_name.substring(0,i);

    s_name = ts + s + s_name.substring(j,s_name.length);

    i = s_name.indexOf(' ',j);

    if(i == (s_name.length - 1)) i = -1;

}

document.dForm.name.value = s_name;

return true;

}



function CheckEmail(s_email)

{



s_email = IsItPresent(s_email,'your email address');

if(! s_email) return false;

var i = s_email.indexOf(' ',0);

while(i > -1)

{

    s_email = s_email.substring(0,i) + 

        s_email.substring((i + 1),s_email.length);

    i = s_email.indexOf(' ',0);

}

document.dForm.email.value = s_email;

if((s_email.length < 6) ||

   (s_email.indexOf('@',0) < 1) ||

   (s_email.lastIndexOf('@') != s_email.indexOf('@',0)) ||

   (s_email.lastIndexOf('@') > (s_email.length - 5)) ||

   (s_email.lastIndexOf('.') > (s_email.length - 3)) ||

   (s_email.lastIndexOf('.') < (s_email.length - 4)) ||

   (s_email.indexOf('..',0) > -1) ||

   (s_email.indexOf('@.',0) > -1) ||

   (s_email.indexOf('.@',0) > -1) ||

   (s_email.indexOf(',',0) > -1))

{

    alert('The email address "' + s_email + '" is not valid.');

    return false;

}

return true;

}

// -->

</script>

そして、これは html フォームです (head タグと /head タグの間の JavaScript を除いたものです)。

<html>
<head>
<style type=text/css>
.inputtext { width: 300px; height:30px; }

<!--
.button {
display:block;
font-weight:bold;
font-size:18px;
font-family:Calibri;
color:#009933;
background-color:#ffffff;
width:150px;
text-align:center;
padding:4px;
border-top: 1px solid #b2b2b2;
border-bottom: 1px solid #b2b2b2;
border-left: 1px solid #b2b2b2;
border-right: 1px solid #b2b2b2;

}
-->
</style></head>

<form name="dForm" action="script.cgi" method="POST">
<div align=center>
<Table border=0><tr><td>
<table border=0>

<tr>
<td valign=top><h3><font face=calibri color=#009933>Full name<font face=calibri color=red>*</font>    </h3></td>
<td valign=top><input onBlur="CheckName(document.dForm.name.value)" name="name" type="text" class=inputtext></td>
</tr>

<tr>
<td valign=top><font face=calibri color=#009933><h3>Email address<font face=calibri color=red>*</font></h3></td> 
<td valign=top><input onBlur="CheckEmail(document.dForm.email.value)" name="email" type="text" class=inputtext></td>
</tr>

<tr>
<td valign=top><font face=calibri color=#009933><h3>Select your gender</h3></font></td>
<td valign=top><font face=calibri><input type="radio" name="gender" value="Male"> Male&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type=radio name=gender value=Female> Female</font></td>
</tr>

<tr>
<td valign=top><font face=calibri color=#009933><h3>Select your age</h3></font></td>
<td valign=top><select name="age" size=1>
                 <option value=Below18>Below 18</option>
                 <option value=18>18</option>
                 <option value=19>19</option>

                 <option value=20>20</option>
                 <option value=21>21</option>
                 <option value=22>22</option>
                 <option value=23>23</option>
                 <option value=24>24</option>
                 <option value=25>25</option>
                 <option value=26>26</option>
                 <option value=27>27</option>
                 <option value=28>28</option>
                 <option value=29>29</option>

                 <option value=30>30</option>
                 <option value=31>31</option>
                 <option value=32>32</option>
                 <option value=33>33</option>
                 <option value=34>34</option>
                 <option value=35>35</option>
                 <option value=36>36</option>
                 <option value=37>37</option>
                 <option value=38>38</option>
                 <option value=39>39</option>

                 <option value=40>40</option>
                 <option value=41>41</option>
                 <option value=42>42</option>
                 <option value=43>43</option>
                 <option value=44>44</option>
                 <option value=45>45</option>
                 <option value=46>46</option>
                 <option value=47>47</option>
                 <option value=48>48</option>
                 <option value=49>49</option>

                 <option value=50>50</option>
                 <option value=51>51</option>
                 <option value=52>52</option>
                 <option value=53>53</option>
                 <option value=54>54</option>
                 <option value=55>55</option>
                 <option value=56>56</option>
                 <option value=57>57</option>
                 <option value=58>58</option>
                 <option value=59>59</option>

                 <option value=60>60</option>
                 <option value=61>61</option>
                 <option value=62>62</option>
                 <option value=63>63</option>
                 <option value=64>64</option>
                 <option value=65>65</option>
                 <option value=66>66</option>
                 <option value=67>67</option>
                 <option value=68>68</option>
                 <option value=69>69</option>

                 <option value=70>70</option>
                 <option value=71>71</option>
                 <option value=72>72</option>
                 <option value=73>73</option>
                 <option value=74>74</option>
                 <option value=75>75</option>
                 <option value=76>76</option>
                 <option value=77>77</option>
                 <option value=78>78</option>
                 <option value=79>79</option>

                 <option value=80>80</option>
                 <option value=81>81</option>
                 <option value=82>82</option>
                 <option value=83>83</option>
                 <option value=84>84</option>
                 <option value=85>85</option>
                 <option value=86>86</option>
                 <option value=87>87</option>
                 <option value=88>88</option>
                 <option value=89>89</option>

                 <option value=90>90</option>
                 <option value=91>91</option>
                 <option value=92>92</option>
                 <option value=93>93</option>
                 <option value=94>94</option>
                 <option value=95>95</option>
                 <option value=96>96</option>
                 <option value=97>97</option>
                 <option value=98>98</option>
                 <option value=99>99</option>
</select></td>
</tr>
</table>
<br><br>
<table border=0>

<tr><td valign=top>
<font face=calibri color=#009933><h3>1) From where did you hear about Angrybullet2 ?</h3></font>
<font face=calibri color=black><input type=radio name=hear-about value=Search_engines> Search engines (google, yahoo, bing, &#8230 )<br>
 <input type=radio name=hear-about value=Fromafriend> From a friend<br>
 <input type=radio name=hear-about value=FromYouTube> From YouTube<br>
 <input type=radio name=hear-about value=Other> Other</font>

<br><br>

<font face=calibri color=#009933><h3>2) Are you subscribed to Angrybullet2 ?</h3></font>
<font face=calibri color=black>
    <input type=radio name=sub-or-not value=Yes> Yes, I am<br>
    <input type=radio name=sub-or-not value=No,but_I_wish_to_subscribe> No, but I wish to subscribe<br>
    <input type=radio name=sub-or-not value=No,I_am_not,and_I_won't_subscribe> No, I am not, and I won't subscribe<br>
    <input type=radio name=sub-or-not value=No_account> I don't have a YouTube account</font>

<br><br>

<font face=calibri color=#009933><h3>3) How many videos of Angrybullet2 did you watch ?</h3></font>
<font face=calibri color=black><input type=radio name=n videos watched value=None> None<br>
                                     <input type=radio name=n-vids-watched value=1-2> 1-2<br>
                                     <input type=radio name=n-vids-watched value=3-4> 3-4<br>
                                     <input type=radio name=n-vids-watched value=5-9> 5-9<br>
                                     <input type=radio name=n-vids-watched value=10_and_more> 10 and more</font>

<br><br>

<font face=calibri color=#009933><h3>4) Did you enjoy watching videos from Angrybullet2 ?</h3></font>
<font face=calibri color=black>
                     <input type=radio name=enjoy-or-not value=Yes,I_did> Yes, I did<br>
                     <input type=radio name=enjoy-or-not value=No,I_didn't> No, I didn't<br>
                     <input type=radio name=enjoy-or-not value=I_watched_none_of_your_videos> I watched none of your videos</font>

<br><br>

<font face=calibri color=#009933><h3>5) What was the type of the video(s) you watched ?</h3>Do not answer if you watched none of my videos</font><br>
<font face=calibri color=black>
                     <input type=checkbox name=vid-type[] value=Tutorial(s)> Tutorial(s) (how to)<br>
                     <input type=checkbox name=vid-type[] value=Sound effect(s)> Sound effect(s)<br>
                     <input type=checkbox name=vid-type[] value=Experiment(s)> Experiment(s)<br>

<br><br>

<font face=calibri color=#009933><h3>6) Do you have any suggestion in order to make Angrybullet2 better ?</h3></font>
    <textarea rows="10" cols="75" name="suggestions"></textarea></td></tr></table>

<table border=0><tr><td valign=top>
<input onClick="return ValidateAll()" type="submit" value="Submit survey" class=button></td><td><input type="reset" value="Reset survey fields" class=button></td></tr></table>
</td></tr></Table>
</form>
</div>
</html>

どんな助けでも大歓迎です。あなたの助けとあなたの時間を前もってありがとう

javascript - javascriptでonBlurタグを削除しますか?

1 に答える 1

Related

Reference