summaryrefslogtreecommitdiffstats
path: root/dom/html/test/forms/test_formnovalidate_attribute.html
blob: 067060a5cdc9c5fae967a0b46c971b2ed70bfa0b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=589696
-->
<head>
  <title>Test for Bug 589696</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=589696">Mozilla Bug 589696</a>
<p id="display"></p>
<iframe style='width:50px; height: 50px;' name='t'></iframe>
<div id="content">
  <!-- Next forms should not submit because formnovalidate isn't set on the
       element used for the submission. -->
  <form target='t' action='data:text/html,'>
    <input id='av' required>
    <input type='submit' formnovalidate>
    <input id='a' type='submit'>
  </form>
  <form target='t' action='data:text/html,'>
    <input id='bv' type='checkbox' required>
    <button type='submit' formnovalidate></button>
    <button id='b' type='submit'></button>
  </form>
  <!-- Next form should not submit because formnovalidate only applies for
       submit controls. -->
  <form target='t' action='data:text/html,'>
    <input id='c' required formnovalidate>
  </form>
  <!--- Next forms should submit without any validation check. -->
  <form target='t' action='data:text/html,'>
    <input id='dv' required>
    <input id='d' type='submit' formnovalidate>
  </form>
  <form target='t' action='data:text/html,'>
    <input id='ev' type='checkbox' required>
    <button id='e' type='submit' formnovalidate></button>
  </form>
</div>
<pre id="test">
<script type="application/javascript">

/** Test for Bug 589696 **/

var os = SpecialPowers.Cc['@mozilla.org/observer-service;1']
                      .getService(SpecialPowers.Ci.nsIObserverService);
var observers = os.enumerateObservers("invalidformsubmit");

/**
 * formnovalidate should prevent form validation if set on the submit control
 * used to submit the form.
 *
 * The following test should not be done if there is no observer for
 * "invalidformsubmit" because the form submission will not be canceled in that
 * case.
 */

if (observers.hasMoreElements()) {
  document.getElementById('av').addEventListener("invalid", function(aEvent) {
    aEvent.target.removeAttribute("invalid", arguments.callee, false);
    ok(true, "formnovalidate should not apply on if not set on the submit " +
             "control used for the submission");
    document.getElementById('b').click();
  }, false);

  document.getElementById('bv').addEventListener("invalid", function(aEvent) {
    aEvent.target.removeAttribute("invalid", arguments.callee, false);
    ok(true, "formnovalidate should not apply on if not set on the submit " +
             "control used for the submission");
    var c = document.getElementById('c');
    c.focus();
    synthesizeKey("KEY_Enter", { code: "Enter" });
  }, false);

  document.getElementById('c').addEventListener("invalid", function(aEvent) {
    aEvent.target.removeAttribute("invalid", arguments.callee, false);
    ok(true, "formnovalidate should only apply on submit controls");
    document.getElementById('d').click();
  }, false);

  document.forms[3].addEventListener("submit", function(aEvent) {
    aEvent.target.removeAttribute("submit", arguments.callee, false);
    ok(true, "formnovalidate applies if set on the submit control used for the submission");
    document.getElementById('e').click();
  }, false);

  document.forms[4].addEventListener("submit", function(aEvent) {
    aEvent.target.removeAttribute("submit", arguments.callee, false);
    ok(true, "formnovalidate applies if set on the submit control used for the submission");
    SimpleTest.executeSoon(SimpleTest.finish);
  }, false);

  /**
   * We have to be sure invalid events behave as expected.
   * They should be sent before the submit event so we can just create a test
   * failure if we got one when unexpected. All of them should be caught if
   * sent.
   * At worst, we got random green which isn't harmful.
   * If expected, they will be part of the chain reaction.
   */
  function unexpectedInvalid(aEvent)
  {
    aEvent.target.removeAttribute("invalid", unexpectedInvalid, false);
    ok(false, "invalid event should not be sent");
  }

  document.getElementById('dv').addEventListener("invalid", unexpectedInvalid, false);
  document.getElementById('ev').addEventListener("invalid", unexpectedInvalid, false);

  /**
   * Some submission have to be canceled. In that case, the submit events should
   * not be sent.
   * Same behavior as unexpected invalid events.
   */
  function unexpectedSubmit(aEvent)
  {
    aEvent.target.removeAttribute("submit", unexpectedSubmit, false);
    ok(false, "submit event should not be sent");
  }

  document.forms[0].addEventListener("submit", unexpectedSubmit, false);
  document.forms[1].addEventListener("submit", unexpectedSubmit, false);
  document.forms[2].addEventListener("submit", unexpectedSubmit, false);

  SimpleTest.waitForExplicitFinish();

  // This is going to call all the tests (with a chain reaction).
  SimpleTest.waitForFocus(function() {
    document.getElementById('a').click();
  });
} else {
  todo(false, "No 'invalidformsubmit' observers. Skip test.");
}

</script>
</pre>
</body>
</html>